row selection

components/table/demo/checkbox.md

@@ -1,10 +0,0 @@
-# 选择
-
-- order: 1
-
-第一列是联动的选择框。
-
----
-
-````jsx
-````

components/table/demo/row-selection.md

@@ -0,0 +1,49 @@
+# 选择
+
+- order: 1
+
+第一列是联动的选择框。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}];
+var data = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+var rowSelection = {
+  onSelect: function(record, selected) {
+    console.log(record, selected);
+  },
+  onSelectAll: function(selected) {
+    console.log(selected);
+  }
+};
+
+React.render(<Table rowSelection={rowSelection} columns={columns} data={data} />
+, document.getElementById('components-table-demo-row-selection'));
+````

components/table/index.jsx

@@ -1,14 +1,73 @@
+'use strict';
+
 import React from 'react';
 import Table from 'rc-table';
 
 let AntTable = React.createClass({
+  getInitialState() {
+    return {
+      selectedRowKeys: []
+    };
+  },
   getDefaultProps() {
     return {
       prefixCls: 'ant-table',
-      useFixedHeader: false
+      useFixedHeader: false,
+      rowSelection: null
     };
   },
+  handleSelect(e) {
+    let checked = e.currentTarget.checked;
+    let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
+    let selectedRow = this.props.data[currentRowIndex - 1];
+    if (checked) {
+      this.state.selectedRowKeys.push(currentRowIndex);
+    } else {
+      this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i){
+        return currentRowIndex !== i;
+      });
+    }
+    this.setState({
+      selectedRowKeys: this.state.selectedRowKeys
+    });
+    if (this.props.rowSelection.onSelect) {
+      this.props.rowSelection.onSelect(selectedRow, checked);
+    }
+  },
+  handleSelectAllRow(e) {
+    let checked = e.currentTarget.checked;
+    this.setState({
+      selectedRowKeys: checked ? this.props.data.map(function(item, i) {
+        return i + 1;
+      }) : []
+    });
+    if (this.props.rowSelection.onSelectAll) {
+      this.props.rowSelection.onSelectAll(checked);
+    }
+  },
+  renderSelectionCheckBox(value, record, index) {
+    let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
+    let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
+    return checkbox;
+  },
   render() {
+    if (this.props.rowSelection) {
+      let checked = this.props.data.every(function(item, i) {
+        return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
+      }, this);
+      let checkboxAll = <input type="checkbox" checked={checked} onChange={this.handleSelectAllRow} />;
+      let selectionColumn = {
+        key: 'selection-column',
+        title: checkboxAll,
+        render: this.renderSelectionCheckBox
+      };
+      if (this.props.columns[0] &&
+          this.props.columns[0].key === 'selection-column') {
+        this.props.columns[0] = selectionColumn;
+      } else {
+        this.props.columns.unshift(selectionColumn);
+      }
+    }
     return <Table {...this.props} />;
   }
 });