feat: 新增多选示例

demo/TableDemo.scss

@@ -7,6 +7,7 @@
 @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
 @import "../node_modules/bee-form-control/src/FormControl.scss";
 @import "../node_modules/bee-pagination/src/Pagination.scss";
+@import "../node_modules/bee-checkbox/src/Checkbox.scss";
 
 .editable-cell {
   position: relative;

demo/demolist/Demo11.js

@@ -41,10 +41,10 @@ const data11 = [
   { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
-const defaultProps = {
+const defaultProps11 = {
   prefixCls: "bee-table"
 };
-class Demo11 extends Component {
+export class Demo11 extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -52,7 +52,7 @@ class Demo11 extends Component {
       data: data11
     };
   }
-  toggleSortOrder(order, column) {
+  toggleSortOrder=(order, column)=> {
     let { sortOrder, data, oldData } = this.state;
     let ascend_sort = function(key) {
       return function(a, b) {
@@ -68,8 +68,6 @@ class Demo11 extends Component {
       // 切换为未排序状态
       order = "";
     }
-    debugger;
-    console.log(oldData);
     if (!oldData) {
       oldData = data.concat();
     }
@@ -137,6 +135,4 @@ class Demo11 extends Component {
     return <Table columns={columns} data={this.state.data} />;
   }
 }
-Demo11.defaultProps = defaultProps;
+Demo11.defaultProps = defaultProps11;
-
-export default Demo11;

demo/demolist/Demo12.js

@@ -0,0 +1,162 @@
+/**
+*
+* @title 全选功能
+* @description 全选功能
+*
+*/
+
+const columns12 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "操作",
+    dataIndex: "",
+    key: "d",
+    render() {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+const data12 = [
+  { a: "杨过", b: "男", c: 30, key: "2" },
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+const defaultProps12 = {
+  prefixCls: "bee-table",
+  multiSelect: {
+    type: "checkbox",
+    param: "key"
+  }
+};
+export 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);
+  };
+  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]);
+    // }
+    debugger;
+    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}
+              
+              onHandleChange={this.onAllCheckChange}
+            />
+          ),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          width: "5%",
+          render: (text, record, index) => {
+            return (
+              <Checkbox
+                className="table-checkbox"
+                checked={this.state.checkedArray[index]}
+                onHandleChange={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} />;
+  }
+}
+Demo12.defaultProps = defaultProps12;

demo/index-demo-base.js

@@ -8,6 +8,7 @@ import Table from '../src';
 import Animate from 'bee-animate';
 import Pagination from "bee-pagination";
 import Icon from "bee-icon";
+import Checkbox from "bee-checkbox";
 import InputGroup from 'bee-input-group';
 import FormControl from 'bee-form-control';
 import Input from 'bee-form-control';

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "bee-animate": "latest",
     "bee-button": "latest",
+    "bee-checkbox": "^0.2.2",
     "bee-form-control": "^0.1.8",
     "bee-icon": "0.0.5",
     "bee-input-group": "^0.1.12",