index.jsx 13.3 KB
Newer Older
A
afc163 已提交
1
import React from 'react';
A
afc163 已提交
2
import jQuery from 'jquery';
A
afc163 已提交
3
import Table from 'rc-table';
A
afc163 已提交
4
import Dropdown from '../dropdown';
A
afc163 已提交
5
import Checkbox from '../checkbox';
A
afc163 已提交
6
import FilterMenu from './filterMenu';
7
import Pagination from '../pagination';
A
afc163 已提交
8
import objectAssign from 'object-assign';
Y
yiminghe 已提交
9
import equals from 'is-equal-shallow';
A
afc163 已提交
10

Y
yiminghe 已提交
11 12
function noop() {
}
13

Y
yiminghe 已提交
14 15 16
function defaultResolve(data) {
  return data || [];
}
17

18
class DataSource {
Y
yiminghe 已提交
19 20
  init(config) {
    this.config = config;
dqaria's avatar
dqaria 已提交
21
    this.url = config.url || '';
22 23 24
    this.resolve = config.resolve || defaultResolve;
    this.getParams = config.getParams || noop;
    this.getPagination = config.getPagination || noop;
A
afc163 已提交
25
    this.headers = config.headers || {};
A
afc163 已提交
26
    this.data = config.data || {};
Y
yiminghe 已提交
27 28 29 30 31 32 33 34
  }

  constructor(config) {
    if (config) {
      this.init(config);
    }
  }

A
afc163 已提交
35 36 37 38 39 40
  clone(config) {
    if (config) {
      return new DataSource(objectAssign(config, this.config));
    } else {
      return this;
    }
41 42 43 44
  }
}

var AntTable = React.createClass({
Y
yiminghe 已提交
45
  getInitialState() {
A
afc163 已提交
46
    return {
Y
yiminghe 已提交
47
      // 减少状态
A
afc163 已提交
48
      selectedRowKeys: [],
Y
yiminghe 已提交
49 50 51 52 53 54 55 56 57 58
      // only for remote
      data: [],
      filters: {},
      loading: !this.isLocalDataSource(),
      sortColumn: '',
      sortOrder: '',
      sorter: null,
      pagination: this.hasPagination() ? objectAssign({
        pageSize: 10
      }, this.props.pagination) : {}
A
afc163 已提交
59 60
    };
  },
Y
yiminghe 已提交
61

A
afc163 已提交
62 63
  getDefaultProps() {
    return {
A
afc163 已提交
64
      prefixCls: 'ant-table',
A
afc163 已提交
65
      useFixedHeader: false,
A
afc163 已提交
66
      rowSelection: null,
A
afc163 已提交
67 68
      size: 'normal',
      bordered: false
A
afc163 已提交
69 70
    };
  },
Y
yiminghe 已提交
71

A
afc163 已提交
72 73 74 75
  propTypes: {
    dataSource: React.PropTypes.instanceOf(DataSource)
  },

A
afc163 已提交
76
  componentWillReceiveProps(nextProps) {
Y
yiminghe 已提交
77
    if (('pagination' in nextProps) && nextProps.pagination !== false) {
A
afc163 已提交
78
      this.setState({
Y
yiminghe 已提交
79
        pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
A
afc163 已提交
80 81
      });
    }
Y
yiminghe 已提交
82 83 84 85 86 87 88 89 90
    if (!this.isLocalDataSource()) {
      if (!equals(nextProps, this.props)) {
        this.setState({
          selectedRowKeys: [],
          loading: true
        }, this.fetch);
      }
    }
    if (nextProps.columns !== this.props.columns) {
A
afc163 已提交
91
      this.setState({
Y
yiminghe 已提交
92
        filters: {}
A
afc163 已提交
93 94 95
      });
    }
  },
A
afc163 已提交
96 97

  hasPagination(pagination) {
Y
yiminghe 已提交
98 99
    if (pagination === undefined) {
      pagination = this.props.pagination;
A
afc163 已提交
100
    }
Y
yiminghe 已提交
101 102
    return pagination !== false;
  },
A
afc163 已提交
103 104

  isLocalDataSource() {
Y
yiminghe 已提交
105
    return Array.isArray(this.props.dataSource);
A
afc163 已提交
106
  },
A
afc163 已提交
107 108

  getRemoteDataSource() {
Y
yiminghe 已提交
109
    return this.props.dataSource;
A
afc163 已提交
110
  },
A
afc163 已提交
111

A
afc163 已提交
112
  toggleSortOrder(order, column) {
113 114
    let sortColumn = this.state.sortColumn;
    let sortOrder = this.state.sortOrder;
J
jljsj 已提交
115
    let sorter;
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
    // 同时允许一列进行排序,否则会导致排序顺序的逻辑问题
    if (sortColumn) {
      sortColumn.className = '';
    }
    if (sortColumn !== column) {  // 当前列未排序
      sortOrder = order;
      sortColumn = column;
      sortColumn.className = 'ant-table-column-sort';
    } else {                      // 当前列已排序
      if (sortOrder === order) {  // 切换为未排序状态
        sortOrder = '';
        sortColumn = null;
      } else {                    // 切换为排序状态
        sortOrder = order;
        sortColumn.className = 'ant-table-column-sort';
      }
A
afc163 已提交
132
    }
Y
yiminghe 已提交
133 134
    if (this.isLocalDataSource()) {
      sorter = function () {
135
        let result = column.sorter.apply(this, arguments);
136
        if (sortOrder === 'ascend') {
137
          return result;
138
        } else if (sortOrder === 'descend') {
139 140 141
          return -result;
        }
      };
A
afc163 已提交
142
    }
Y
yiminghe 已提交
143
    this.fetch({
A
afc163 已提交
144
      sortOrder: sortOrder,
J
jljsj 已提交
145 146
      sortColumn: sortColumn,
      sorter: sorter
Y
yiminghe 已提交
147
    });
A
afc163 已提交
148
  },
A
afc163 已提交
149

Y
yiminghe 已提交
150 151 152 153 154 155 156 157
  handleFilter(column, filters) {
    filters = objectAssign({}, this.state.filters, {
      [this.getColumnKey(column)]: filters
    });
    this.fetch({
      selectedRowKeys: [],
      filters: filters
    });
A
afc163 已提交
158
  },
A
afc163 已提交
159

Y
yiminghe 已提交
160
  handleSelect(record, rowIndex, e) {
A
afc163 已提交
161
    let checked = e.target.checked;
Y
yiminghe 已提交
162 163
    let selectedRowKeys = this.state.selectedRowKeys.concat();
    let key = this.getRecordKey(record, rowIndex);
164
    if (checked) {
Y
yiminghe 已提交
165
      selectedRowKeys.push(this.getRecordKey(record, rowIndex));
166
    } else {
Y
yiminghe 已提交
167 168
      selectedRowKeys = selectedRowKeys.filter((i) => {
        return key !== i;
169 170 171
      });
    }
    this.setState({
Y
yiminghe 已提交
172
      selectedRowKeys: selectedRowKeys
173 174
    });
    if (this.props.rowSelection.onSelect) {
Y
yiminghe 已提交
175 176 177
      let data = this.getCurrentPageData();
      let selectedRows = data.filter((row, i) => {
        return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
A
afc163 已提交
178
      });
Y
yiminghe 已提交
179
      this.props.rowSelection.onSelect(record, checked, selectedRows);
180 181
    }
  },
A
afc163 已提交
182

A
afc163 已提交
183 184
  handleSelectAllRow(e) {
    let checked = e.target.checked;
Y
yiminghe 已提交
185 186 187 188
    let data = this.getCurrentPageData();
    let selectedRowKeys = checked ? data.map((item, i) => {
      return this.getRecordKey(item, i);
    }) : [];
A
afc163 已提交
189 190
    this.setState({
      selectedRowKeys: selectedRowKeys
191 192
    });
    if (this.props.rowSelection.onSelectAll) {
Y
yiminghe 已提交
193 194
      let selectedRows = data.filter((row, i) => {
        return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
A
afc163 已提交
195 196
      });
      this.props.rowSelection.onSelectAll(checked, selectedRows);
A
afc163 已提交
197
    }
A
afc163 已提交
198
  },
A
afc163 已提交
199

200
  handlePageChange(current) {
Y
yiminghe 已提交
201
    let pagination = objectAssign({}, this.state.pagination);
202 203 204 205 206
    if (current) {
      pagination.current = current;
    } else {
      pagination.current = pagination.current || 1;
    }
Y
yiminghe 已提交
207 208 209
    this.fetch({
      // 防止内存泄漏,只维持当页
      selectedRowKeys: [],
A
afc163 已提交
210
      pagination: pagination
Y
yiminghe 已提交
211
    });
212
  },
A
afc163 已提交
213

214
  renderSelectionCheckBox(value, record, index) {
Y
yiminghe 已提交
215
    let rowIndex = this.getRecordKey(record, index); // 从 1 开始
A
afc163 已提交
216
    let checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0;
Y
yiminghe 已提交
217 218
    return <Checkbox checked={checked} onChange={this.handleSelect.bind(this, record, rowIndex)}/>;
  },
A
afc163 已提交
219 220

  getRecordKey(record, index) {
Y
yiminghe 已提交
221
    return record.key || index;
222
  },
A
afc163 已提交
223

224
  renderRowSelection() {
Y
yiminghe 已提交
225
    let columns = this.props.columns.concat();
226
    if (this.props.rowSelection) {
Y
yiminghe 已提交
227 228 229 230 231 232 233 234 235 236 237
      let data = this.getCurrentPageData();
      let checked;
      if (!data.length) {
        checked = false;
      } else {
        checked = data.every((item, i) => {
          let key = this.getRecordKey(item, i);
          return this.state.selectedRowKeys.indexOf(key) >= 0;
        });
      }
      let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow}/>;
238 239 240 241
      let selectionColumn = {
        key: 'selection-column',
        title: checkboxAll,
        width: 60,
A
afc163 已提交
242 243
        render: this.renderSelectionCheckBox,
        className: 'ant-table-selection-column'
244 245
      };
      if (columns[0] &&
Y
yiminghe 已提交
246
        columns[0].key === 'selection-column') {
247 248 249 250 251 252 253
        columns[0] = selectionColumn;
      } else {
        columns.unshift(selectionColumn);
      }
    }
    return columns;
  },
Y
yiminghe 已提交
254

A
afc163 已提交
255
  getCurrentPageData() {
Y
yiminghe 已提交
256 257 258
    return this.isLocalDataSource() ? this.getLocalDataPaging() : this.state.data;
  },

A
afc163 已提交
259
  getColumnKey(column) {
Y
yiminghe 已提交
260 261 262 263 264
    return column.key || column.dataIndex;
  },

  renderColumnsDropdown(columns) {
    return columns.map((column) => {
Y
yiminghe 已提交
265
      column = objectAssign({}, column);
Y
yiminghe 已提交
266
      let key = this.getColumnKey(column);
A
afc163 已提交
267
      let filterDropdown, menus, sortButton;
268
      if (column.filters && column.filters.length > 0) {
Y
yiminghe 已提交
269 270
        let colFilters = this.state.filters[key] || [];
        menus = <FilterMenu column={column}
Y
yiminghe 已提交
271
                            selectedKeys={colFilters}
Y
yiminghe 已提交
272
                            confirmFilter={this.handleFilter}/>;
A
afc163 已提交
273
        let dropdownSelectedClass = '';
Y
yiminghe 已提交
274
        if (colFilters.length > 0) {
A
afc163 已提交
275 276 277
          dropdownSelectedClass = 'ant-table-filter-selected';
        }
        filterDropdown = <Dropdown trigger="click"
Y
yiminghe 已提交
278
                                   overlay={menus}>
A
afc163 已提交
279
          <i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
A
afc163 已提交
280 281 282
        </Dropdown>;
      }
      if (column.sorter) {
283
        let isSortColumn = (this.state.sortColumn === column);
A
afc163 已提交
284 285
        sortButton = <div className="ant-table-column-sorter">
          <span className={'ant-table-column-sorter-up ' +
286
                           ((isSortColumn && this.state.sortOrder === 'ascend') ? 'on' : 'off')}
Y
yiminghe 已提交
287 288
                title="升序排序"
                onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
A
afc163 已提交
289 290 291
            <i className="anticon anticon-caret-up"></i>
          </span>
          <span className={'ant-table-column-sorter-down ' +
292
                           ((isSortColumn && this.state.sortOrder === 'descend') ? 'on' : 'off')}
Y
yiminghe 已提交
293 294
                title="降序排序"
                onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
A
afc163 已提交
295 296 297 298 299
            <i className="anticon anticon-caret-down"></i>
          </span>
        </div>;
      }
      column.title = [
Y
yiminghe 已提交
300
        column.title,
A
afc163 已提交
301 302 303
        sortButton,
        filterDropdown
      ];
A
afc163 已提交
304
      return column;
A
afc163 已提交
305 306
    });
  },
A
afc163 已提交
307

308 309
  renderPagination() {
    // 强制不需要分页
Y
yiminghe 已提交
310 311
    if (!this.hasPagination()) {
      return null;
A
afc163 已提交
312
    }
A
afc163 已提交
313 314 315 316
    let classString = 'ant-table-pagination';
    if (this.props.size === 'small') {
      classString += ' mini';
    }
Y
yiminghe 已提交
317 318 319 320
    let total;
    if (this.isLocalDataSource()) {
      total = this.getLocalData().length;
    }
A
afc163 已提交
321
    return <Pagination className={classString}
Y
yiminghe 已提交
322 323 324
                       onChange={this.handlePageChange}
                       total={total}
                       pageSize={10}
325
      {...this.state.pagination} />;
A
afc163 已提交
326
  },
A
afc163 已提交
327

Y
yiminghe 已提交
328
  prepareParamsArguments(state) {
329 330 331
    // 准备筛选、排序、分页的参数
    let pagination;
    let filters = {};
A
afc163 已提交
332
    let sorter = {};
Y
yiminghe 已提交
333 334 335 336 337
    pagination = state.pagination;
    this.props.columns.forEach((column) => {
      let colFilters = state.filters[this.getColumnKey(column)] || [];
      if (colFilters.length > 0) {
        filters[this.getColumnKey(column)] = colFilters;
338 339
      }
    });
Y
yiminghe 已提交
340 341 342 343 344
    if (state.sortColumn &&
      state.sortOrder &&
      state.sortColumn.dataIndex) {
      sorter.field = state.sortColumn.dataIndex;
      sorter.order = state.sortOrder;
A
afc163 已提交
345 346
    }
    return [pagination, filters, sorter];
347
  },
Y
yiminghe 已提交
348 349 350 351 352 353 354 355 356 357 358 359 360

  fetch(newState) {
    if (this.isLocalDataSource()) {
      if (newState) {
        this.setState(newState);
      }
    } else {
      let state = objectAssign({}, this.state, newState);
      if (newState || !this.state.loading) {
        this.setState(objectAssign({
          loading: true
        }, newState));
      }
A
afc163 已提交
361
      // remote 模式使用 this.dataSource
Y
yiminghe 已提交
362
      let dataSource = this.getRemoteDataSource();
A
afc163 已提交
363
      let buildInParams = dataSource.getParams.apply(this, this.prepareParamsArguments(state)) || {};
A
afc163 已提交
364
      return jQuery.ajax({
365
        url: dataSource.url,
A
afc163 已提交
366
        data: objectAssign(buildInParams, dataSource.data),
A
afc163 已提交
367 368
        headers: dataSource.headers,
        dataType: 'json',
A
afc163 已提交
369 370
        success: (result) => {
          if (this.isMounted()) {
A
afc163 已提交
371
            let pagination = objectAssign(
Y
yiminghe 已提交
372
              state.pagination,
A
afc163 已提交
373 374
              dataSource.getPagination.call(this, result)
            );
A
afc163 已提交
375
            this.setState({
Y
yiminghe 已提交
376
              loading: false,
377
              data: dataSource.resolve.call(this, result),
Y
yiminghe 已提交
378
              pagination: pagination
A
afc163 已提交
379 380 381
            });
          }
        },
A
afc163 已提交
382
        error: () => {
A
afc163 已提交
383
          this.setState({
Y
yiminghe 已提交
384 385
            loading: false,
            data: []
A
afc163 已提交
386 387 388
          });
        }
      });
Y
yiminghe 已提交
389 390 391
    }
  },

A
afc163 已提交
392
  findColumn(myKey) {
Y
yiminghe 已提交
393 394 395 396 397
    return this.props.columns.filter((c) => {
      return this.getColumnKey(c) === myKey;
    })[0];
  },

A
afc163 已提交
398
  getLocalDataPaging() {
Y
yiminghe 已提交
399 400 401 402 403 404 405
    let data = this.getLocalData();
    let current, pageSize;
    let state = this.state;
    // 如果没有分页的话,默认全部展示
    if (!this.hasPagination()) {
      pageSize = Number.MAX_VALUE;
      current = 1;
406
    } else {
Y
yiminghe 已提交
407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424
      pageSize = state.pagination.pageSize;
      current = state.pagination.current;
    }
    // 分页
    // ---
    // 当数据量少于每页数量时,直接设置数据
    // 否则进行读取分页数据
    if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
      data = data.filter((item, i) => {
        if (i >= (current - 1) * pageSize &&
          i < current * pageSize) {
          return item;
        }
      });
    }
    return data;
  },

A
afc163 已提交
425
  getLocalData() {
Y
yiminghe 已提交
426 427 428 429 430 431 432 433 434 435 436
    let state = this.state;
    let data = this.props.dataSource;
    // 排序
    if (state.sortOrder && state.sorter) {
      data = data.sort(state.sorter);
    }
    // 筛选
    if (state.filters) {
      Object.keys(state.filters).forEach((columnKey) => {
        let col = this.findColumn(columnKey);
        let values = state.filters[columnKey] || [];
A
afc163 已提交
437 438 439
        if (values.length === 0) {
          return;
        }
Y
yiminghe 已提交
440 441 442 443
        data = data.filter((record) => {
          return values.some((v)=> {
            return col.onFilter(v, record);
          });
444
        });
A
afc163 已提交
445
      });
A
afc163 已提交
446
    }
Y
yiminghe 已提交
447
    return data;
A
afc163 已提交
448
  },
Y
yiminghe 已提交
449

A
afc163 已提交
450
  componentDidMount() {
Y
yiminghe 已提交
451 452 453
    if (!this.isLocalDataSource()) {
      this.fetch();
    }
A
afc163 已提交
454
  },
455

Y
yiminghe 已提交
456 457 458 459 460
  render() {
    let data = this.getCurrentPageData();
    let columns = this.renderRowSelection();
    let classString = '';
    if (this.state.loading && this.isLocalDataSource()) {
A
afc163 已提交
461 462 463 464 465
      classString += ' ant-table-loading';
    }
    if (this.props.size === 'small') {
      classString += ' ant-table-small';
    }
A
afc163 已提交
466 467 468
    if (this.props.bordered) {
      classString += ' ant-table-bordered';
    }
Y
yiminghe 已提交
469
    columns = this.renderColumnsDropdown(columns);
470
    return <div className="clearfix">
Y
yiminghe 已提交
471 472 473 474 475 476
      <Table
        {...this.props}
        data={data || []}
        columns={columns}
        className={classString}
        />
477 478
      {this.renderPagination()}
    </div>;
A
afc163 已提交
479 480
  }
});
481 482 483

AntTable.DataSource = DataSource;

dqaria's avatar
dqaria 已提交
484
export default AntTable;