diff --git a/README.md b/README.md index 9d2ab33e5..1c9551152 100644 --- a/README.md +++ b/README.md @@ -188,18 +188,6 @@ React.render(, mountNode); - - - - - - - - - - - - diff --git a/examples/pagingColumns.html b/examples/pagingColumns.html deleted file mode 100644 index 48cdce852..000000000 --- a/examples/pagingColumns.html +++ /dev/null @@ -1 +0,0 @@ -placeholder diff --git a/examples/pagingColumns.js b/examples/pagingColumns.js deleted file mode 100644 index 3a5ea8d23..000000000 --- a/examples/pagingColumns.js +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable no-console,func-names,react/no-multi-comp */ -const React = require('react'); -const ReactDOM = require('react-dom'); -const Table = require('rc-table'); -require('rc-table/assets/index.less'); - -const columns = [ - { title: 'title1', dataIndex: 'a', key: 'a' }, - { title: 'title2', dataIndex: 'b', key: 'b' }, - { title: 'title3', dataIndex: 'b', key: 'c' }, - { title: 'title4', dataIndex: 'b', key: 'd' }, - { title: 'title5', dataIndex: 'b', key: 'e' }, - { title: 'title6', dataIndex: 'b', key: 'f' }, - { title: 'title7', dataIndex: 'b', key: 'g' }, - { title: 'title8', dataIndex: 'b', key: 'h' }, - { title: 'title9', dataIndex: 'b', key: 'i' }, - { title: 'title10', dataIndex: 'b', key: 'j' }, - { title: 'title11', dataIndex: 'b', key: 'k' }, - { title: 'title12', dataIndex: 'b', key: 'l' }, -]; - -const data = [ - { a: '123', key: '1' }, - { a: 'cdd', b: 'edd', key: '2' }, - { a: '1333', c: 'eee', d: 2, key: '3' }, -]; - -ReactDOM.render( -
-

paging columns table

-
handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName]
columnsPageSizeNumber5pageSize of columns. (Deprecated, use fixed columns)
columnsPageRangeArraycolumns index range need paging, like [2,10]. (Deprecated, use column.fixed)
showHeader Boolean
- , - document.getElementById('__react-content') -); diff --git a/src/Table.jsx b/src/Table.jsx index d11aa386d..8e067418b 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -25,8 +25,6 @@ const Table = React.createClass({ indentSize: PropTypes.number, onRowClick: PropTypes.func, onRowDoubleClick: PropTypes.func, - columnsPageRange: PropTypes.array, - columnsPageSize: PropTypes.number, expandIconColumnIndex: PropTypes.number, showHeader: PropTypes.bool, title: PropTypes.func, @@ -57,7 +55,6 @@ const Table = React.createClass({ style: {}, childrenColumnName: 'children', indentSize: 15, - columnsPageSize: 5, expandIconColumnIndex: 0, showHeader: true, scroll: {}, @@ -191,7 +188,7 @@ const Table = React.createClass({ // columns are passed from fixed table function that already grouped. rows = this.getHeaderRows(columns); } else { - rows = this.getHeaderRows(this.groupColumns(this.getCurrentColumns())); + rows = this.getHeaderRows(this.groupColumns(this.props.columns)); } if (expandIconAsCell && fixed !== 'right') { @@ -310,7 +307,7 @@ const Table = React.createClass({ height: fixedColumnsBodyRowsHeight[i], } : {}; - const leafColumns = this.getLeafColumns(columns || this.getCurrentColumns()); + const leafColumns = this.getLeafColumns(columns || props.columns); rst.push( {cols}; }, - getCurrentColumns() { - const { columns, columnsPageRange, columnsPageSize, prefixCls } = this.props; - const { currentColumnsPage } = this.state; - if (!columnsPageRange || columnsPageRange[0] > columnsPageRange[1]) { - return columns; - } - return columns.map((column, i) => { - let newColumn = { ...column }; - if (i >= columnsPageRange[0] && i <= columnsPageRange[1]) { - const pageIndexStart = columnsPageRange[0] + currentColumnsPage * columnsPageSize; - let pageIndexEnd = columnsPageRange[0] + (currentColumnsPage + 1) * columnsPageSize - 1; - if (pageIndexEnd > columnsPageRange[1]) { - pageIndexEnd = columnsPageRange[1]; - } - if (i < pageIndexStart || i > pageIndexEnd) { - newColumn.className = newColumn.className || ''; - newColumn.className += ` ${prefixCls}-column-hidden`; - } - newColumn = this.wrapPageColumn(newColumn, (i === pageIndexStart), (i === pageIndexEnd)); - } - return newColumn; - }); - }, - getLeftFixedTable() { const { columns } = this.props; const fixedColumns = this.groupColumns(columns).filter( @@ -564,11 +537,6 @@ const Table = React.createClass({ ) : null; }, - getMaxColumnsPage() { - const { columnsPageRange, columnsPageSize } = this.props; - return Math.ceil((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize) - 1; - }, - getLeafColumns(columns) { const leafColumns = []; columns.forEach(column => { @@ -585,20 +553,6 @@ const Table = React.createClass({ return this.getLeafColumns(columns).length; }, - goToColumnsPage(currentColumnsPage) { - const maxColumnsPage = this.getMaxColumnsPage(); - let page = currentColumnsPage; - if (page < 0) { - page = 0; - } - if (page > maxColumnsPage) { - page = maxColumnsPage; - } - this.setState({ - currentColumnsPage: page, - }); - }, - // add appropriate rowspan and colspan to column groupColumns(columns, currentRow = 0, parentColumn = {}, rows = []) { // track how many rows we got @@ -669,39 +623,6 @@ const Table = React.createClass({ } }, - prevColumnsPage() { - this.goToColumnsPage(this.state.currentColumnsPage - 1); - }, - - nextColumnsPage() { - this.goToColumnsPage(this.state.currentColumnsPage + 1); - }, - - wrapPageColumn(column, hasPrev, hasNext) { - const { prefixCls } = this.props; - const { currentColumnsPage } = this.state; - const maxColumnsPage = this.getMaxColumnsPage(); - let prevHandlerCls = `${prefixCls}-prev-columns-page`; - if (currentColumnsPage === 0) { - prevHandlerCls += ` ${prefixCls}-prev-columns-page-disabled`; - } - const prevHandler = ; - let nextHandlerCls = `${prefixCls}-next-columns-page`; - if (currentColumnsPage === maxColumnsPage) { - nextHandlerCls += ` ${prefixCls}-next-columns-page-disabled`; - } - const nextHandler = ; - if (hasPrev) { - column.title = {prevHandler}{column.title}; - column.className = `${column.className || ''} ${prefixCls}-column-has-prev`; - } - if (hasNext) { - column.title = {column.title}{nextHandler}; - column.className = `${column.className || ''} ${prefixCls}-column-has-next`; - } - return column; - }, - findExpandedRow(record) { const rows = this.getExpandedRows().filter(i => i === this.getRowKey(record)); return rows[0]; @@ -721,7 +642,7 @@ const Table = React.createClass({ if ('isAnyColumnsFixedCache' in this) { return this.isAnyColumnsFixedCache; } - this.isAnyColumnsFixedCache = this.getCurrentColumns().some(column => !!column.fixed); + this.isAnyColumnsFixedCache = this.props.columns.some(column => !!column.fixed); return this.isAnyColumnsFixedCache; }, @@ -729,7 +650,7 @@ const Table = React.createClass({ if ('isAnyColumnsLeftFixedCache' in this) { return this.isAnyColumnsLeftFixedCache; } - this.isAnyColumnsLeftFixedCache = this.getCurrentColumns().some( + this.isAnyColumnsLeftFixedCache = this.props.columns.some( column => column.fixed === 'left' || column.fixed === true ); return this.isAnyColumnsLeftFixedCache; @@ -739,7 +660,7 @@ const Table = React.createClass({ if ('isAnyColumnsRightFixedCache' in this) { return this.isAnyColumnsRightFixedCache; } - this.isAnyColumnsRightFixedCache = this.getCurrentColumns().some( + this.isAnyColumnsRightFixedCache = this.props.columns.some( column => column.fixed === 'right' ); return this.isAnyColumnsRightFixedCache; @@ -796,9 +717,6 @@ const Table = React.createClass({ if (props.className) { className += ` ${props.className}`; } - if (props.columnsPageRange) { - className += ` ${prefixCls}-columns-paging`; - } if (props.useFixedHeader || (props.scroll && props.scroll.y)) { className += ` ${prefixCls}-fixed-header`; } diff --git a/tests/PagingColumns.spec.js b/tests/PagingColumns.spec.js deleted file mode 100644 index 55347f9c5..000000000 --- a/tests/PagingColumns.spec.js +++ /dev/null @@ -1,123 +0,0 @@ -/* eslint-disable no-console,func-names,react/no-multi-comp */ -const expect = require('expect.js'); -const Table = require('../'); -const React = require('react'); -const ReactDOM = require('react-dom'); -const $ = require('jquery'); -const TestUtils = require('react-addons-test-utils'); -const Simulate = TestUtils.Simulate; - -describe('Table with paging columns ', () => { - const div = document.createElement('div'); - document.body.appendChild(div); - const divWithPagingColumns = document.createElement('div'); - document.body.appendChild(divWithPagingColumns); - - const columns = [ - { title: '表头1', dataIndex: 'a', key: 'a' }, - { title: '表头2', dataIndex: 'b', key: 'b' }, - { title: '表头3', dataIndex: 'b', key: 'c' }, - { title: '表头4', dataIndex: 'b', key: 'd' }, - { title: '表头5', dataIndex: 'b', key: 'e' }, - { title: '表头6', dataIndex: 'b', key: 'f' }, - { title: '表头7', dataIndex: 'b', key: 'g' }, - { title: '表头8', dataIndex: 'b', key: 'h' }, - { title: '表头9', dataIndex: 'b', key: 'i' }, - { title: '表头10', dataIndex: 'b', key: 'j' }, - { title: '表头11', dataIndex: 'b', key: 'k' }, - { title: '表头12', dataIndex: 'b', key: 'l' }, - ]; - - const data = [ - { a: '123', key: '1' }, - { a: 'cdd', b: 'edd', key: '2' }, - { a: '1333', c: 'eee', d: 2, key: '3' }, - ]; - let node; - let nodeWithPagingColumns; - - beforeEach(() => { - ReactDOM.render( -
, - div - ); - node = $(div); - ReactDOM.render( -
, - divWithPagingColumns - ); - nodeWithPagingColumns = $(divWithPagingColumns); - }); - - afterEach(() => { - ReactDOM.unmountComponentAtNode(div); - ReactDOM.unmountComponentAtNode(divWithPagingColumns); - }); - - it('should display all columns', () => { - expect(node.find('.rc-table-thead th:not(.rc-table-column-hidden)').length).to.be(12); - }); - - it('should display columns in current page', () => { - expect(nodeWithPagingColumns.find('.rc-table-thead th:not(.rc-table-column-hidden)').length) - .to.be(6); - const hiddenColumns = nodeWithPagingColumns.find('.rc-table-thead th.rc-table-column-hidden'); - hiddenColumns.each((i, col) => { - expect(col.innerHTML).to.be(`表头${6 + i}`); - }); - }); - - it('should be able to switch next and prev', () => { - expect(nodeWithPagingColumns.find('.rc-table-prev-columns-page').length).to.be(1); - expect(nodeWithPagingColumns.find('.rc-table-next-columns-page').length).to.be(1); - expect(nodeWithPagingColumns.find('.rc-table-prev-columns-page') - .hasClass('rc-table-prev-columns-page-disabled')).to.be.ok(); - - // 进入第二页 - Simulate.click(nodeWithPagingColumns.find('.rc-table-next-columns-page')[0]); - expect(nodeWithPagingColumns.find('.rc-table-prev-columns-page') - .hasClass('rc-table-prev-columns-page-disabled')).not.to.be.ok(); - let hiddenColumns = nodeWithPagingColumns.find('.rc-table-thead th.rc-table-column-hidden'); - hiddenColumns.each((i, col) => { - if (i < 4) { - // 2 3 4 5 - expect(col.innerHTML).to.be(`表头${2 + i}`); - } else { - // 10 11 - expect(col.innerHTML).to.be(`表头${6 + i}`); - } - }); - // 进入第三页 - Simulate.click(nodeWithPagingColumns.find('.rc-table-next-columns-page')[0]); - expect(nodeWithPagingColumns.find('.rc-table-next-columns-page') - .hasClass('rc-table-next-columns-page-disabled')).to.be.ok(); - hiddenColumns = nodeWithPagingColumns.find('.rc-table-thead th.rc-table-column-hidden'); - expect(hiddenColumns.length).to.be(8); - hiddenColumns.each((i, col) => { - expect(col.innerHTML).to.be(`表头${2 + i}`); - }); - // 进入第二页 - Simulate.click(nodeWithPagingColumns.find('.rc-table-prev-columns-page')[0]); - expect(nodeWithPagingColumns.find('.rc-table-next-columns-page') - .hasClass('rc-table-next-columns-page-disabled')).not.to.be.ok(); - hiddenColumns = nodeWithPagingColumns.find('.rc-table-thead th.rc-table-column-hidden'); - hiddenColumns.each((i, col) => { - if (i < 4) { - // 2 3 4 5 - expect(col.innerHTML).to.be(`表头${2 + i}`); - } else { - // 10 11 - expect(col.innerHTML).to.be(`表头${6 + i}`); - } - }); - // 进入第一页 - Simulate.click(nodeWithPagingColumns.find('.rc-table-prev-columns-page')[0]); - expect(nodeWithPagingColumns.find('.rc-table-prev-columns-page') - .hasClass('rc-table-prev-columns-page-disabled')).to.be.ok(); - hiddenColumns = nodeWithPagingColumns.find('.rc-table-thead th.rc-table-column-hidden'); - expect(hiddenColumns.length).to.be(6); - hiddenColumns.each((i, col) => { - expect(col.innerHTML).to.be(`表头${6 + i}`); - }); - }); -}); diff --git a/tests/index.js b/tests/index.js index 5f1d842d2..58c7b1945 100644 --- a/tests/index.js +++ b/tests/index.js @@ -1,3 +1,2 @@ require('./index.spec.js'); -require('./PagingColumns.spec.js'); require('./GroupingColumns.spec.js'); diff --git a/tests/index.spec.js b/tests/index.spec.js index 6dc5dad23..5d84ee7c9 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -4,7 +4,6 @@ const Table = require('../'); const React = require('react'); const ReactDOM = require('react-dom'); const $ = require('jquery'); -import './PagingColumns.spec'; describe('table', () => { const div = document.createElement('div');