From b442d9526438a50fe10e56e436426e6086752308 Mon Sep 17 00:00:00 2001 From: Tony Baeg Date: Wed, 4 Nov 2015 22:15:42 -0500 Subject: [PATCH] onRowClick feature --- src/BootstrapTable.js | 13 ++++++++++++- src/TableBody.js | 13 +++++++++++++ src/TableRow.js | 6 ++++-- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index 562ce0568..25cf9e55a 100644 --- a/src/BootstrapTable.js +++ b/src/BootstrapTable.js @@ -167,6 +167,7 @@ class BootstrapTable extends React.Component { sortName={this.props.options.sortName} sortOrder={this.props.options.sortOrder} onSort={this.handleSort.bind(this)} + onRowClick={this.handleRowClick.bind(this)} onSelectAllRow={this.handleSelectAllRow.bind(this)} bordered={this.props.bordered}> {this.props.children} @@ -184,7 +185,9 @@ class BootstrapTable extends React.Component { selectRow={this.props.selectRow} cellEdit={this.props.cellEdit} selectedRowKeys={this.state.selectedRowKeys} - onSelectRow={this.handleSelectRow.bind(this)}/> + onRowClick={this.handleRowClick.bind(this)} + onSelectRow={this.handleSelectRow.bind(this)} + /> {tableFilter} {pagination} @@ -223,6 +226,12 @@ class BootstrapTable extends React.Component { }); } + handleRowClick(row) { + if (this.props.selectRow.onRowClick) { + this.props.selectRow.onRowClick(row); + } + } + handleSelectAllRow(e) { var isSelected = e.currentTarget.checked; let selectedRowKeys = []; @@ -503,6 +512,7 @@ BootstrapTable.propTypes = { mode: React.PropTypes.string, bgColor: React.PropTypes.string, selected: React.PropTypes.array, + onRowClick: React.PropTypes.func, onSelect: React.PropTypes.func, onSelectAll: React.PropTypes.func, clickToSelect: React.PropTypes.bool, @@ -548,6 +558,7 @@ BootstrapTable.defaultProps = { mode: Const.ROW_SELECT_NONE, bgColor: Const.ROW_SELECT_BG_COLOR, selected: [], + onRowClick: undefined, onSelect: undefined, onSelectAll: undefined, clickToSelect: false, diff --git a/src/TableBody.js b/src/TableBody.js index 770292fd6..f7ade999a 100644 --- a/src/TableBody.js +++ b/src/TableBody.js @@ -104,6 +104,7 @@ class TableBody extends React.Component{ {selectRowColumn} {tableColumns} @@ -158,6 +159,17 @@ class TableBody extends React.Component{ ) } + handleRowClick(rowIndex){ + var key, selectedRow; + this.props.data.forEach(function(row, i){ + if(i == rowIndex-1){ + key = row[this.props.keyField]; + selectedRow = row; + } + }, this); + this.props.onRowClick(selectedRow); + } + handleSelectRow(rowIndex, isSelected){ var key, selectedRow; this.props.data.forEach(function(row, i){ @@ -234,6 +246,7 @@ TableBody.propTypes = { condensed: React.PropTypes.bool, keyField: React.PropTypes.string, selectedRowKeys: React.PropTypes.array, + onRowClick: React.PropTypes.func, onSelectRow: React.PropTypes.func }; export default TableBody; diff --git a/src/TableRow.js b/src/TableRow.js index fa3a08f8e..13a3ea641 100644 --- a/src/TableRow.js +++ b/src/TableRow.js @@ -5,7 +5,8 @@ class TableRow extends React.Component{ rowClick(e){ if(e.target.tagName !== "INPUT") - this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected); + if (this.props.selectRow.clickToSelect) this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected); + if (this.props.selectRow.onRowClick) this.props.onRowClick(e.currentTarget.rowIndex); } render(){ @@ -18,7 +19,7 @@ class TableRow extends React.Component{ }; if(this.props.selectRow && !this.props.enableCellEdit && - (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell)){ + (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell) || this.props.selectRow.onRowClick){ return( {this.props.children} ) @@ -32,6 +33,7 @@ class TableRow extends React.Component{ TableRow.propTypes = { isSelected: React.PropTypes.bool, enableCellEdit: React.PropTypes.bool, + onRowClick: React.PropTypes.func, onSelectRow: React.PropTypes.func }; export default TableRow;