diff --git a/README.md b/README.md index 0516ea727..10743831f 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,11 @@ React.renderComponent( ### property -#### columns +#### keyField + +* key value of each row + +#### columns * The columns config of table * title : The title of column @@ -89,4 +93,4 @@ http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front ## License -rc-table is released under the MIT license. \ No newline at end of file +rc-table is released under the MIT license. diff --git a/examples/key.html b/examples/key.html new file mode 100644 index 000000000..e69de29bb diff --git a/examples/key.js b/examples/key.js new file mode 100644 index 000000000..ff69f8201 --- /dev/null +++ b/examples/key.js @@ -0,0 +1,71 @@ +'use strict'; + +var React = require('react'); +var Table = require('rc-table'); + +var CheckBox = React.createClass({ + + render: function() { + return ( + + ); + } +}); + +var MyTable = React.createClass({ + + getInitialState: function() { + return { + data: this.props.data + }; + }, + + handleClick: function(index) { + var self = this; + return function() { + self.remove(index); + }; + }, + + remove: function(index) { + var rows = this.state.data; + rows.splice(index, 1); + this.setState({ + data: rows + }); + }, + + renderAction: function(o, row, index) { + return 删除; + }, + + render: function() { + var state = this.state; + var columns = [ + { title: '表头1', dataIndex: 'a', width: 100, renderer: this.checkbox }, + { title: '表头2', dataIndex: 'b', width: 100}, + { title: '表头3', dataIndex: 'c', width: 200}, + { title: '操作', dataIndex: '', renderer: this.renderAction } + ]; + return ( + + ); + }, + + checkbox: function(a) { + return ; + } +}); + +var data = [{a: '123'}, {a: 'cdd', b: 'edd'}, {a: '1333', c: 'eee', d: 2}]; + +React.render( +
+ + +
, + document.getElementById('__react-content') +); diff --git a/src/Table.jsx b/src/Table.jsx index a9cc0bd6d..16100df32 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -26,7 +26,7 @@ class TableRow extends React.Component { if (renderer) { text = renderer(text, record, index); } - cells.push(
); + cells.push(); } return ({cells}); } @@ -39,7 +39,7 @@ class Table extends React.Component { rst = []; for (var i = 0; i < columns.length; i++) { var col = columns[i]; - rst.push(); + rst.push(); } return rst; } @@ -50,12 +50,13 @@ class Table extends React.Component { columns = self.props.columns, rst = []; + var keyField = this.props.keyField; for (var i = 0; i < data.length; i++) { var record = data[i]; - rst.push(); + var key = keyField ? record[keyField] : i; + rst.push(); } return rst; - } render() {
{text}{text}