fix(multiSelect.js): 修复全选功能中使用rowKey参数bug

README.md

@@ -68,7 +68,7 @@ class Demo extends Component {
 | useFixedHeader         | 是否使用固定表头                                 | bool                                   | false           |
 | bodyStyle              | 添加到tablebody上的style                      | object                                 | {}              |
 | style                  | 添加到table上的style                          | object                                 | {}              |
-| rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。 | string or Function(record):string      | 'key'           |
+| rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string      | 'key'           |
 | rowClassName           | 获取行的classname                            | Function(record, index, indent):string | () => ''        |
 | expandedRowClassName   | 获取展开行的className                          | Function(recode, index, indent):string | () => ''        |
 | onExpand               | 展开行时的钩子函数                                | Function(expanded, record)             | () => ''        |

build/lib/multiSelect.js

@@ -122,10 +122,11 @@ function multiSelect(Table) {
           dataIndex: "checkbox",
           width: "100px",
           render: function render(text, record, index) {
-            var bool = checkedObj.hasOwnProperty(record["key"]);
+            var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
+            var bool = checkedObj.hasOwnProperty(rowKey);
             return _react2["default"].createElement(_beeCheckbox2["default"], {
               className: "table-checkbox",
-              checked: checkedObj[record.key],
+              checked: checkedObj[rowKey],
               disabled: !bool,
               onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
             });
@@ -137,13 +138,23 @@ function multiSelect(Table) {
     };
 
     multiSelect.prototype.render = function render() {
+      var _this3 = this;
+
       var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
-      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
+      return _react2["default"].createElement(Table, _extends({ ref: function ref(table_ref) {
+          _this3.table_ref = table_ref;
+        } }, this.props, { columns: columns }));
     };
 
     return multiSelect;
   }(_react.Component), _initialiseProps = function _initialiseProps() {
-    var _this3 = this;
+    var _this4 = this;
+
+    this.getRowKey = function (record, index) {
+      var rowKey = _this4.props.rowKey || 'key';
+      var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
+      return key;
+    };
 
     this.initCheckedObj = function (props) {
       var checkedObj = {},
@@ -153,15 +164,16 @@ function multiSelect(Table) {
 
       for (var i = 0; i < data.length; i++) {
         var bool = selectDisabled && selectDisabled(data[i], i) || false;
+        var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
         if (!bool) {
-          checkedObj[data[i]["key"]] = selectedRow && selectedRow(data[i], i) || false;
+          checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
         }
       }
       return checkedObj;
     };
 
     this.onAllCheckChange = function () {
-      var self = _this3;
+      var self = _this4;
       var listData = self.state.data.concat();
       var checkedObj = _extends({}, self.state.checkedObj);
       var data = self.props.data;
@@ -180,11 +192,12 @@ function multiSelect(Table) {
         }
       }
       for (var i = 0; i < data.length; i++) {
-        var bool = checkedObj.hasOwnProperty(data[i]["key"]);
+        var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
+        var bool = checkedObj.hasOwnProperty(rowKey);
         if (!bool) {
           selIds.splice(i, 1);
         } else {
-          checkedObj[data[i]["key"]] = !self.state.checkedAll;
+          checkedObj[rowKey] = !self.state.checkedAll;
         }
       }
       self.setState({
@@ -196,7 +209,7 @@ function multiSelect(Table) {
     };
 
     this.onCheckboxChange = function (text, record, index) {
-      var self = _this3;
+      var self = _this4;
       var allFlag = false;
       var selIds = self.state.selIds;
       var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
@@ -204,12 +217,13 @@ function multiSelect(Table) {
       var checkedArray = Object.keys(checkedObj);
       var getSelectedDataFunc = self.props.getSelectedDataFunc;
 
-      if (checkedObj[record["key"]]) {
+      var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
+      if (checkedObj[rowKey]) {
         selIds.remove(id);
       } else {
         selIds.push(id);
       }
-      checkedObj[record["key"]] = !checkedObj[record["key"]];
+      checkedObj[rowKey] = !checkedObj[rowKey];
       for (var i = 0; i < checkedArray.length; i++) {
         if (!checkedObj[checkedArray[i]]) {
           allFlag = false;

dist/demo.js

@@ -10346,10 +10346,11 @@
 	          dataIndex: "checkbox",
 	          width: "100px",
 	          render: function render(text, record, index) {
-	            var bool = checkedObj.hasOwnProperty(record["key"]);
+	            var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
+	            var bool = checkedObj.hasOwnProperty(rowKey);
 	            return _react2["default"].createElement(_beeCheckbox2["default"], {
 	              className: "table-checkbox",
-	              checked: checkedObj[record.key],
+	              checked: checkedObj[rowKey],
 	              disabled: !bool,
 	              onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
 	            });
@@ -10361,13 +10362,23 @@
 	    };
 	
 	    multiSelect.prototype.render = function render() {
+	      var _this3 = this;
+	
 	      var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
-	      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
+	      return _react2["default"].createElement(Table, _extends({ ref: function ref(table_ref) {
+	          _this3.table_ref = table_ref;
+	        } }, this.props, { columns: columns }));
 	    };
 	
 	    return multiSelect;
 	  }(_react.Component), _initialiseProps = function _initialiseProps() {
-	    var _this3 = this;
+	    var _this4 = this;
+	
+	    this.getRowKey = function (record, index) {
+	      var rowKey = _this4.props.rowKey || 'key';
+	      var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
+	      return key;
+	    };
 	
 	    this.initCheckedObj = function (props) {
 	      var checkedObj = {},
@@ -10377,15 +10388,16 @@
 	
 	      for (var i = 0; i < data.length; i++) {
 	        var bool = selectDisabled && selectDisabled(data[i], i) || false;
+	        var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
 	        if (!bool) {
-	          checkedObj[data[i]["key"]] = selectedRow && selectedRow(data[i], i) || false;
+	          checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
 	        }
 	      }
 	      return checkedObj;
 	    };
 	
 	    this.onAllCheckChange = function () {
-	      var self = _this3;
+	      var self = _this4;
 	      var listData = self.state.data.concat();
 	      var checkedObj = _extends({}, self.state.checkedObj);
 	      var data = self.props.data;
@@ -10404,11 +10416,12 @@
 	        }
 	      }
 	      for (var i = 0; i < data.length; i++) {
-	        var bool = checkedObj.hasOwnProperty(data[i]["key"]);
+	        var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
+	        var bool = checkedObj.hasOwnProperty(rowKey);
 	        if (!bool) {
 	          selIds.splice(i, 1);
 	        } else {
-	          checkedObj[data[i]["key"]] = !self.state.checkedAll;
+	          checkedObj[rowKey] = !self.state.checkedAll;
 	        }
 	      }
 	      self.setState({
@@ -10420,7 +10433,7 @@
 	    };
 	
 	    this.onCheckboxChange = function (text, record, index) {
-	      var self = _this3;
+	      var self = _this4;
 	      var allFlag = false;
 	      var selIds = self.state.selIds;
 	      var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
@@ -10428,12 +10441,13 @@
 	      var checkedArray = Object.keys(checkedObj);
 	      var getSelectedDataFunc = self.props.getSelectedDataFunc;
 	
-	      if (checkedObj[record["key"]]) {
+	      var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
+	      if (checkedObj[rowKey]) {
 	        selIds.remove(id);
 	      } else {
 	        selIds.push(id);
 	      }
-	      checkedObj[record["key"]] = !checkedObj[record["key"]];
+	      checkedObj[rowKey] = !checkedObj[rowKey];
 	      for (var i = 0; i < checkedArray.length; i++) {
 	        if (!checkedObj[checkedArray[i]]) {
 	          allFlag = false;

docs/api.md

@@ -26,7 +26,7 @@ import 'bee-table/build/Table.css';
 | useFixedHeader         | 是否使用固定表头                                 | bool                                   | false           |
 | bodyStyle              | 添加到tablebody上的style                      | object                                 | {}              |
 | style                  | 添加到table上的style                          | object                                 | {}              |
-| rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。 | string or Function(record):string      | 'key'           |
+| rowKey                 | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string      | 'key'           |
 | rowClassName           | 获取行的classname                            | Function(record, index, indent):string | () => ''        |
 | expandedRowClassName   | 获取展开行的className                          | Function(recode, index, indent):string | () => ''        |
 | onExpand               | 展开行时的钩子函数                                | Function(expanded, record)             | () => ''        |

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.0.11",
+ "version": "1.0.12",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/lib/multiSelect.js

@@ -51,13 +51,20 @@ export default function multiSelect(Table) {
         });
       }
     }
+    getRowKey=(record, index) => {
+      const rowKey = this.props.rowKey || 'key';
+      const key = (typeof rowKey === 'function') ?
+        rowKey(record, index) : record[rowKey];
+      return key;
+    }
     initCheckedObj = props => {
       let checkedObj = {},
         { selectDisabled, selectedRow, data } = props;
       for (var i = 0; i < data.length; i++) {
         let bool = (selectDisabled && selectDisabled(data[i], i)) || false;
+        let rowKey = data[i]["key"] ? data[i]["key"] : this.getRowKey(data[i],i);
         if (!bool) {
-          checkedObj[data[i]["key"]] =
+          checkedObj[rowKey] =
             (selectedRow && selectedRow(data[i], i)) || false;
         }
       }
@@ -82,11 +89,12 @@ export default function multiSelect(Table) {
         }
       }
       for (var i = 0; i < data.length; i++) {
-        let bool = checkedObj.hasOwnProperty(data[i]["key"]);
+        let rowKey = data[i]["key"] ? data[i]["key"] : this.getRowKey(data[i],i);
+        let bool = checkedObj.hasOwnProperty(rowKey);
         if (!bool) {
           selIds.splice(i, 1);
         } else {
-          checkedObj[data[i]["key"]] = !self.state.checkedAll;
+          checkedObj[rowKey] = !self.state.checkedAll;
         }
       }
       self.setState({
@@ -108,12 +116,13 @@ export default function multiSelect(Table) {
       let checkedObj = Object.assign({}, self.state.checkedObj);
       let checkedArray = Object.keys(checkedObj);
       let { getSelectedDataFunc } = self.props;
-      if (checkedObj[record["key"]]) {
+      let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
+      if (checkedObj[rowKey]) {
         selIds.remove(id);
       } else {
         selIds.push(id);
       }
-      checkedObj[record["key"]] = !checkedObj[record["key"]];
+      checkedObj[rowKey] = !checkedObj[rowKey];
       for (var i = 0; i < checkedArray.length; i++) {
         if (!checkedObj[checkedArray[i]]) {
           allFlag = false;
@@ -163,11 +172,12 @@ export default function multiSelect(Table) {
             dataIndex: "checkbox",
             width: "100px",
             render: (text, record, index) => {
-              let bool = checkedObj.hasOwnProperty(record["key"]);
+              let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
+              let bool = checkedObj.hasOwnProperty(rowKey);
               return (
                 <Checkbox
                   className="table-checkbox"
-                  checked={checkedObj[record.key]}
+                  checked={checkedObj[rowKey]}
                   disabled={!bool}
                   onChange={this.onCheckboxChange.bind(
                     this,
@@ -186,7 +196,7 @@ export default function multiSelect(Table) {
     }
     render() {
       let columns = this.renderColumnsMultiSelect(this.props.columns).concat();
-      return <Table {...this.props} columns={columns} />;
+      return <Table ref={(table_ref) => { this.table_ref = table_ref; }} {...this.props} columns={columns} />;
     }
   };
 }