重写全选示例

demo/demolist/Demo12.js

@@ -8,7 +8,8 @@
 
 import React, { Component } from 'react';
 import Table from '../../src';
-import Checkbox from "bee-checkbox";
+import multiSelect from "../../src/lib/multiSelect.js";
+import Checkbox from 'bee-checkbox';
 
 const columns12 = [
   {
@@ -42,124 +43,32 @@ const data12 = [
   { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
   { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
 ];
+//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
+let MultiSelectTable  = multiSelect(Table, Checkbox);
 
-const defaultProps12 = {
-  prefixCls: "bee-table",
-  multiSelect: {
-    type: "checkbox",
-    param: "key"
-  }
-};
 class Demo12 extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      checkedAll:false,
-      checkedArray: [
-        false,
-        false,
-        false,
-      ],
       data: data12
     };
   }
-  onAllCheckChange = () => {
-    let self = this;
-    let checkedArray = [];
-    let listData = self.state.data.concat();
-    let selIds = [];
-    // let id = self.props.multiSelect.param;
-    for (var i = 0; i < self.state.checkedArray.length; i++) {
-      checkedArray[i] = !self.state.checkedAll;
-    }
-    // if (self.state.checkedAll) {
-    //   selIds = [];
-    // } else {
-    //   for (var i = 0; i < listData.length; i++) {
-    //     selIds[i] = listData[i][id];
-    //   }
-    // }
-    self.setState({
-      checkedAll: !self.state.checkedAll,
-      checkedArray: checkedArray,
-      // selIds: selIds
-    });
-    // self.props.onSelIds(selIds);
+  getSelectedDataFunc = data => {
+    console.log(data);
   };
-  onCheckboxChange = (text, record, index) => {
-    let self = this;
-    let allFlag = false;
-    // let selIds = self.state.selIds;
-    // let id = self.props.postId;
-    let checkedArray = self.state.checkedArray.concat();
-    // if (self.state.checkedArray[index]) {
-      // selIds.remove(record[id]);
-    // } else {
-      // selIds.push(record[id]);
-    // }
-    checkedArray[index] = !self.state.checkedArray[index];
-    for (var i = 0; i < self.state.checkedArray.length; i++) {
-      if (!checkedArray[i]) {
-        allFlag = false;
-        break;
-      } else {
-        allFlag = true;
-      }
-    }
-    self.setState({
-      checkedAll: allFlag,
-      checkedArray: checkedArray,
-      // selIds: selIds
-    });
-    // self.props.onSelIds(selIds);
-  };
-  renderColumnsMultiSelect(columns) {
-    const { data,checkedArray } = this.state;
-    const { multiSelect } = this.props;
-    let select_column = {};
-    let indeterminate_bool = false;
-    // let indeterminate_bool1 = true;
-    if (multiSelect && multiSelect.type === "checkbox") {
-      let i = checkedArray.length;
-      while(i--){
-          if(checkedArray[i]){
-            indeterminate_bool = true;
-            break;
-          }
-      }
-      let defaultColumns = [
-        {
-          title: (
-            <Checkbox
-              className="table-checkbox"
-              checked={this.state.checkedAll}
-              indeterminate={indeterminate_bool&&!this.state.checkedAll}
-              onChange={this.onAllCheckChange}
-            />
-          ),
-          key: "checkbox",
-          dataIndex: "checkbox",
-          width: "5%",
-          render: (text, record, index) => {
-            return (
-              <Checkbox
-                className="table-checkbox"
-                checked={this.state.checkedArray[index]}
-                onChange={this.onCheckboxChange.bind(this, text, record, index)}
-              />
-            );
-          }
-        }
-      ];
-      columns = defaultColumns.concat(columns);
-    }
-    return columns;
-  }
+  
   render() {
-    let columns = this.renderColumnsMultiSelect(columns12);
-    return <Table columns={columns} data={data12} />;
+    let multiObj = {
+      type: "checkbox"
+    };
+    return (
+      <MultiSelectTable 
+        columns={columns12} 
+        data={data12} 
+        multiSelect={multiObj}
+        getSelectedDataFunc={this.getSelectedDataFunc}/>
+    );
   }
 }
-Demo12.defaultProps = defaultProps12;
 
 export default Demo12;

demo/demolist/Demo13.js

@@ -101,17 +101,7 @@ class Demo13 extends Component {
       selectedRow: function() {}
     });
   };
-  onClick1 = () => {
-    this.setState({
-      selectDisabled: (record, index) => {
-        // console.log(record);
-        if (index === 2) {
-          return true;
-        }
-        return false;
-      }
-    });
-  };
+
   render() {
     let multiObj = {
       type: "checkbox"
@@ -121,13 +111,6 @@ class Demo13 extends Component {
         <Button className="editable-add-btn" onClick={this.onClick}>
           change selectedRow
         </Button>
-        <Button
-          className="editable-add-btn"
-          style={{ marginLeft: "5px" }}
-          onClick={this.onClick1}
-        >
-          change selectDisabled
-        </Button>
         <ComplexTable
           selectDisabled={this.state.selectDisabled}
           selectedRow={this.state.selectedRow}

dist/demo.css

@@ -5258,6 +5258,18 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
+    .u-panel .u-panel-body .uf {
+      position: absolute;
+      right: 25px;
+      top: 30px;
+      color: #fff;
+      font-size: 20px;
+      padding: 2px 8px;
+      margin: 8px;
+      border-radius: 4px;
+      cursor: pointer; }
+      .u-panel .u-panel-body .uf:hover {
+        color: #a8a7a7; }
 
 .u-panel-default {
   border-color: #ddd; }