diff --git a/README.md b/README.md index 0653d7414..fbf60e182 100644 --- a/README.md +++ b/README.md @@ -213,6 +213,24 @@ var table = React.render( handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] + + highlightSelectedRow + Boolean + false + whether clicked row should be highlighted + + + selectedKey + String + + the key of the row that will be highlighted + + + onRowSelectionChange + Function(record, key, index) + + handle rowSelectionChange action + columnsPageSize Number diff --git a/assets/index.less b/assets/index.less index e9fd0ac93..2eeeedaba 100644 --- a/assets/index.less +++ b/assets/index.less @@ -68,6 +68,9 @@ &.@{tablePrefixCls}-row-hover { background: #eaf8fe; } + &.@{tablePrefixCls}-row-selected { + background: #fff7e6; + } } th, td { diff --git a/examples/highlightSelectedRow.html b/examples/highlightSelectedRow.html new file mode 100644 index 000000000..e69de29bb diff --git a/examples/highlightSelectedRow.js b/examples/highlightSelectedRow.js new file mode 100644 index 000000000..c13485719 --- /dev/null +++ b/examples/highlightSelectedRow.js @@ -0,0 +1,42 @@ +/* eslint-disable no-console,func-names,react/no-multi-comp,react/jsx-boolean-value */ +const React = require('react'); +const ReactDOM = require('react-dom'); +const Table = require('rc-table'); +require('rc-table/assets/index.less'); + +const MyTable = React.createClass({ + onRowSelectionChange: function(record, key, index) { + console.log('selection change'); + console.log('record', record); + console.log('key', key); + console.log('index', index); + }, + + render: function() { + const props = this.props; + const columns = [ + {title: '表头1', dataIndex: 'a', key: 'a', width: 100}, + {id: '123', title: '表头2', dataIndex: 'b', key: 'b', width: 100}, + {title: '表头3', dataIndex: 'c', key: 'c', width: 200}, + ]; + return ( + + ); + }, +}); + +const data = [{a: '123', key: '1'}, {a: 'cdd', b: 'edd', key: '2'}, {a: '1333', c: 'eee', key: '3'}]; + +ReactDOM.render( +
+

highlight selected row

+ +
, + document.getElementById('__react-content') +); diff --git a/src/Table.jsx b/src/Table.jsx index 3961b0b71..a04db4540 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -22,6 +22,9 @@ const Table = React.createClass({ onExpandedRowsChange: PropTypes.func, indentSize: PropTypes.number, onRowClick: PropTypes.func, + onRowSelectionChange: PropTypes.func, + highlightSelectedRow: PropTypes.bool, + selectedKey: PropTypes.string, columnsPageRange: PropTypes.array, columnsPageSize: PropTypes.number, expandIconColumnIndex: PropTypes.number, @@ -58,6 +61,8 @@ const Table = React.createClass({ columnsPageSize: 5, expandIconColumnIndex: 0, showHeader: true, + highlightSelectedRow: false, + selectedKey: null, scroll: {}, rowRef() { return null; @@ -85,6 +90,7 @@ const Table = React.createClass({ data: props.data, currentColumnsPage: 0, currentHoverKey: null, + currentSelectedKey: props.selectedKey, scrollPosition: 'left', fixedColumnsRowsHeight: [], }; @@ -114,6 +120,11 @@ const Table = React.createClass({ data: nextProps.data, }); } + if ('selectedKey' in nextProps) { + this.setState({ + currentSelectedKey: nextProps.selectedKey, + }); + } if ('expandedRowKeys' in nextProps) { this.setState({ expandedRowKeys: nextProps.expandedRowKeys, @@ -125,6 +136,32 @@ const Table = React.createClass({ clearTimeout(this.timer); }, + onRowClick(record, i, e) { + const {onRowClick} = this.props; + const {currentSelectedKey} = this.state; + const eventTag = e.target.tagName.toLowerCase(); + const eventParentTag = e.target.parentElement.tagName.toLowerCase(); + if (eventTag !== 'input' && eventParentTag !== 'label') { + const key = this.getRowKey(record, i); + if (currentSelectedKey !== key) { + this.onRowSelectionChange(record, key, i); + } + } + if (onRowClick) { + onRowClick.apply(null, arguments); + } + }, + + onRowSelectionChange(record, key, index) { // eslint-disable-line no-unused-vars + const {onRowSelectionChange} = this.props; + this.setState({ + currentSelectedKey: key, + }); + if (onRowSelectionChange) { + onRowSelectionChange.apply(null, arguments); + } + }, + onExpandedRowsChange(expandedRowKeys) { if (!this.props.expandedRowKeys) { this.setState({ @@ -214,13 +251,12 @@ const Table = React.createClass({ const props = this.props; const childrenColumnName = props.childrenColumnName; const expandedRowRender = props.expandedRowRender; - const { fixedColumnsRowsHeight } = this.state; + const { fixedColumnsRowsHeight, currentSelectedKey } = this.state; let rst = []; const rowClassName = props.rowClassName; const rowRef = props.rowRef; const expandedRowClassName = props.expandedRowClassName; const needIndentSpaced = props.data.some(record => record[childrenColumnName]); - const onRowClick = props.onRowClick; const isAnyColumnsFixed = this.isAnyColumnsFixed(); const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; @@ -240,6 +276,10 @@ const Table = React.createClass({ className += ' ' + props.prefixCls + '-row-hover'; } + if (props.highlightSelectedRow && currentSelectedKey === key) { + className += ' ' + props.prefixCls + '-row-selected'; + } + const onHoverProps = {}; if (isAnyColumnsFixed) { onHoverProps.onHover = this.handleRowHover; @@ -267,7 +307,7 @@ const Table = React.createClass({ childrenColumnName={childrenColumnName} columns={columns || this.getCurrentColumns()} expandIconColumnIndex={expandIconColumnIndex} - onRowClick={onRowClick} + onRowClick={this.onRowClick} style={style} {...onHoverProps} key={key}