Merge 0322008 into 3ac528d

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.
+rc-table is released under the MIT license.

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 (
+      <label>
+        <input type="checkbox" />
+        {this.props.id}
+      </label>
+    );
+  }
+});
+
+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 <a href="#" onClick={this.handleClick(index)}>删除</a>;
+  },
+
+  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 (
+      <Table columns={columns} data={state.data} className="table" keyField="a"/>
+    );
+  },
+
+  checkbox: function(a) {
+    return <CheckBox id={a} />;
+  }
+});
+
+var data = [{a: '123'}, {a: 'cdd', b: 'edd'}, {a: '1333', c: 'eee', d: 2}];
+
+React.render(
+  <div>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
+    <MyTable data={data} className="table"/>
+  </div>,
+  document.getElementById('__react-content')
+);

src/Table.jsx

@@ -26,7 +26,7 @@ class TableRow extends React.Component {
       if (renderer) {
         text = renderer(text, record, index);
       }
-      cells.push(<td>{text}</td>);
+      cells.push(<td key={i}>{text}</td>);
     }
     return (<tr>{cells}</tr>);
   }
@@ -39,7 +39,7 @@ class Table extends React.Component {
       rst = [];
     for (var i = 0; i < columns.length; i++) {
       var col = columns[i];
-      rst.push(<TableColumn title={col.title} dataIndex={col.dataIndex} width={col.width}/>);
+      rst.push(<TableColumn title={col.title} dataIndex={col.dataIndex} width={col.width} key={i}/>);
     }
     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(<TableRow record={record} index={i} columns={columns}/>);
+      var key = keyField ? record[keyField] : i;
+      rst.push(<TableRow record={record} index={i} columns={columns} key={key}/>);
     }
     return rst;
-
   }
 
   render() {