diff --git a/README.md b/README.md index 9fcd1f792..9d2ab33e5 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,12 @@ React.render(, mountNode); + + + + + + diff --git a/examples/rowClick.js b/examples/rowClick.js index c2e060150..7e9b80de2 100644 --- a/examples/rowClick.js +++ b/examples/rowClick.js @@ -5,15 +5,21 @@ const Table = require('rc-table'); require('rc-table/assets/index.less'); const onRowClick = (record, index, event) => { - console.log(`click nth(${index}) element of parent, record.name: ${record.name}`); + console.log(`Click nth(${index}) element of parent, record.name: ${record.name}`); // See https://facebook.github.io/react/docs/events.html for original click event details. if (event.shiftKey) { console.log('Shift + mouse click triggered.'); } }; -const onOperationClick = (text, record) => { - console.log(`click ${text}, record.name is ${record.name}`); +const onRowDoubleClick = (record, index) => { + console.log(`Double click nth(${index}) element of parent, record.name: ${record.name}`); +}; + +const onOperationClick = (text, record, event) => { + event.preventDefault(); + event.stopPropagation(); + console.log(`Click Cell ${text}, record.name is ${record.name}`); }; const columns = [{ @@ -27,7 +33,7 @@ const columns = [{ key: 'age', width: 100, render: (text, record) => ( - + onOperationClick(text, record, e)}> Alert: {text}, click will pop to row click ), @@ -90,6 +96,11 @@ const data = [{ }]; ReactDOM.render( -
handle rowClick action, index means the index of current row among fatherElement[childrenColumnName]
onRowDoubleClickFunction(record, index)handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName]
columnsPageSize Number
, +
, document.getElementById('__react-content') ); diff --git a/src/Table.jsx b/src/Table.jsx index 8c8469b85..d11aa386d 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -24,6 +24,7 @@ const Table = React.createClass({ onExpandedRowsChange: PropTypes.func, indentSize: PropTypes.number, onRowClick: PropTypes.func, + onRowDoubleClick: PropTypes.func, columnsPageRange: PropTypes.array, columnsPageSize: PropTypes.number, expandIconColumnIndex: PropTypes.number, @@ -49,6 +50,8 @@ const Table = React.createClass({ expandedRowClassName: () => '', onExpand() {}, onExpandedRowsChange() {}, + onRowClick() {}, + onRowDoubleClick() {}, prefixCls: 'rc-table', bodyStyle: {}, style: {}, @@ -278,6 +281,7 @@ const Table = React.createClass({ const expandedRowClassName = props.expandedRowClassName; const needIndentSpaced = props.data.some(record => record[childrenColumnName]); const onRowClick = props.onRowClick; + const onRowDoubleClick = props.onRowDoubleClick; const isAnyColumnsFixed = this.isAnyColumnsFixed(); const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false; @@ -328,6 +332,7 @@ const Table = React.createClass({ columns={leafColumns} expandIconColumnIndex={expandIconColumnIndex} onRowClick={onRowClick} + onRowDoubleClick={onRowDoubleClick} style={style} {...onHoverProps} key={key} diff --git a/src/TableRow.jsx b/src/TableRow.jsx index 8c596e762..96ef89a4d 100644 --- a/src/TableRow.jsx +++ b/src/TableRow.jsx @@ -7,6 +7,7 @@ const TableRow = React.createClass({ propTypes: { onDestroy: PropTypes.func, onRowClick: PropTypes.func, + onRowDoubleClick: PropTypes.func, record: PropTypes.object, prefixCls: PropTypes.string, expandIconColumnIndex: PropTypes.number, @@ -30,6 +31,7 @@ const TableRow = React.createClass({ getDefaultProps() { return { onRowClick() {}, + onRowDoubleClick() {}, onDestroy() {}, expandIconColumnIndex: 0, expandRowByClick: false, @@ -54,14 +56,18 @@ const TableRow = React.createClass({ expandRowByClick, expanded, onExpand, - } = this.props; - + } = this.props; if (expandable && expandRowByClick) { onExpand(!expanded, record); } onRowClick(record, index, event); }, + onRowDoubleClick(event) { + const { record, index, onRowDoubleClick } = this.props; + onRowDoubleClick(record, index, event); + }, + onMouseEnter() { const { onHover, hoverKey } = this.props; onHover(true, hoverKey); @@ -122,6 +128,7 @@ const TableRow = React.createClass({ return (