merge

demo/demolist/Demo1.js

@@ -11,21 +11,23 @@ import Tooltip from "bee-tooltip";
 import Table from "../../src";
 
 const columns = [
-  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
-  render: (text, record, index)=> {
-    return ( 
+  {
+    title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
+    render: (text, record, index) => {
+      return (
         <Tooltip inverse overlay={text}>
-        <span tootip={text} style={{
-                display: "inline-block",
-                width: "100px",
-                textOverflow:"ellipsis",
-                overflow:"hidden",
-                whiteSpace:"nowrap",
-                verticalAlign: "middle",
-            }}>{text}</span>
+          <span tootip={text} style={{
+            display: "inline-block",
+            width: "100px",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+          }}>{text}</span>
         </Tooltip>
-    );
-  }},
+      );
+    }
+  },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   {
@@ -34,20 +36,15 @@ const columns = [
     key: "d",
     render(text, record, index) {
       return (
-        <div style={{position: 'relative'}} title={text} >
-            <a
-                href="#"
-                tooltip={text}
-                onClick={() => {
-                  alert('这是第'+index+'列，内容为:'+text);
-                }}
-                style={{
-                    position: 'absolute',
-                    top: 5,
-                    left: 0
-                }}
-              >
-                一些操作
+        <div style={{ position: 'relative' }} title={text} >
+          <a
+            href="javascript:;"
+            tooltip={text}
+            onClick={() => {
+              alert('这是第' + index + '列，内容为:' + text);
+            }}
+          >
+            一些操作
               </a>
         </div>
       );
@@ -63,12 +60,12 @@ const data = [
 
 class Demo1 extends Component {
 
-  constructor(props){
-      super(props);
-      this.state = {
-        data: data,
-        selectedRowIndex: 0
-      }
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data,
+      selectedRowIndex: 0
+    }
   }
 
   render() {
@@ -76,12 +73,12 @@ class Demo1 extends Component {
       <Table
         columns={columns}
         data={data}
-        onRowClick={(record,index,indent)=>{
-          this.setState({ 
-              selectedRowIndex: index
+        onRowClick={(record, index, indent) => {
+          this.setState({
+            selectedRowIndex: index
           });
         }}
-      /> 
+      />
     );
   }
 }

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}