固定列和checkbox一起使用

demo/demolist/Demo25.js

@@ -1,14 +1,13 @@
 /**
 *
-* @title 根据列进行过滤----edit
-* @description 点击表格右侧按钮，进行表格列的数据过滤。
+* @title 根据列进行过滤、拖拽综合使用案例
+* @description 根据列进行过滤、拖拽综合使用案例
 *
 */
 
-
 import React, { Component } from 'react';
 import Table from '../../src';
-import multiSelect from '../../src/lib/multiSelect';
+import multiSelect from '../../src/lib/newMultiSelect';
 import filterColumn from '../../src/lib/filterColumn';
 import dragColumn from "../../src/lib/dragColumn";
 
@@ -101,7 +100,9 @@ const data25 = [
 // const MultiSelectTable = multiSelect(Table, Checkbox);
 // let ComplexTable = multiSelect(Table, Checkbox);
 
-const DragColumnTable = dragColumn(filterColumn(Table, Popover));
+// const DragColumnTable = multiSelect(Table, Checkbox);
+const DragColumnTable = dragColumn(filterColumn(multiSelect(Table, Checkbox), Popover)); 
+// const DragColumnTable = dragColumn(filterColumn(Table, Popover));
 
 const defaultProps25 = {
   prefixCls: "bee-table"
@@ -117,8 +118,7 @@ class Demo25 extends Component {
     bordered
     dragborder={true}
     scroll={{x:700}}
-
-    // multiSelect={{type: "checkbox"}}
+    multiSelect={{type: "checkbox"}}
     />;
   }
 }

src/Table.js

@@ -476,6 +476,7 @@ class Table extends Component{
   }
 
   getLeftFixedTable() {
+    debugger;
     return this.getTable({
       columns: this.columnManager.leftColumns(),
       fixed: 'left',

src/TableHeader.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
-import {tryParseInt} from './utils';
+import {tryParseInt,ObjectAssign} from './utils';
 
 const propTypes = {
     clsPrefix: PropTypes.string,
@@ -9,6 +9,8 @@ const propTypes = {
     rows: PropTypes.array,
 }
 
+const grap = 16;//偏移数值
+
 class TableHeader extends Component{
 
   constructor(props){
@@ -25,11 +27,21 @@ class TableHeader extends Component{
       initPageLeftX:0,
       initLeft:0,
       x:0,
-      width:0
+      width:0,
     }
-    let _da = {};
-    Object.assign(_da,this.props.rows[0]);
-    this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
+    // let _da = {};
+    // Object.assign(_da,this.props.rows[0]);
+    // this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
+    // let a = this.props.rows[0];
+   
+    let _row = [];
+    this.props.rows[0].forEach(item => {
+      let newItem = item.key != "checkbox"?ObjectAssign(item):item;
+      _row.push(newItem);
+    });
+    debugger;
+    this.drag.data = _row;//JSON.parse(JSON.stringify(this.props.rows[0]));
+
   }
 
   shouldComponentUpdate(nextProps) {
@@ -97,7 +109,22 @@ class TableHeader extends Component{
     //设置hiden的left
     //"u-table-drag-hide-table"
     let currentHideDom = document.getElementById("u-table-drag-hide-table-"+dragborderKey).getElementsByTagName("div")[this.drag.currIndex];
-    currentHideDom.style.left =  (this.drag.initPageLeftX+x-16)+"px"; 
+    currentHideDom.style.left =  (this.drag.initPageLeftX+x-grap)+"px"; 
+    
+    //获取最小宽度，不让拖动
+    // let minWidth = 0;
+    // for(let i=0;i<=this.drag.currIndex;i++){
+    //   minWidth += this.drag.data[i].width;
+    // }
+    
+    // //判断最小值后在赋值 todo
+    // let currLeft = this.drag.initPageLeftX+x-grap;
+    // console.log("currLeft minWidth ",currLeft + " "+minWidth);
+    // if(currLeft <= minWidth){
+    //   return;
+    // }
+    // currentHideDom.style.left =  currLeft+"px"; 
+
     //设置当前的宽度 
     let  currentData = this.drag.data[this.drag.currIndex]; 
     currentData.width = this.drag.width + x; 
@@ -130,7 +157,7 @@ class TableHeader extends Component{
                     key={da.key} />)
                 }else if(dragborder){
                     return(<th
-                    style={{width:da.width}}
+                    style={{width:da.width,minWidth:da.width}}
                     onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
                     onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
                     className={`${da.className} ${clsPrefix}-thead-th `}

src/lib/newMultiSelect.js

@@ -0,0 +1,110 @@
+import React, { Component } from "react";
+import Checkbox from 'bee-checkbox';
+import {ObjectAssign} from '../utils';
+/**
+ * 参数: 过滤表头
+ * @param {*} Table
+ * @param {*} Checkbox
+ * @param {*} Popover
+ * @param {*} Icon
+ */
+
+export default function newMultiSelect(Table, Checkbox) {
+
+  return class NewMultiSelect extends Component {
+    static defaultProps = {
+      prefixCls: "u-table-mult-select"
+    }
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        checkedAll:false,
+        // columns:this.getDefaultColumns(props.columns,"init"),
+        data:ObjectAssign(props.data),
+      }
+    }
+
+    componentWillReceiveProps(nextProps){
+      // if(this.props.columns != nextProps.columns){
+      //   this.setState({
+      //     columns:this.getDefaultColumns(nextProps.columns)
+      //   })
+      // }
+      if(this.props.data != nextProps.data){
+        this.setState({
+          data:ObjectAssign(nextProps.data)
+        })
+      }
+    }
+
+    onAllCheckChange=()=>{
+      let {data,checkedAll} = this.state;
+      let check = checkedAll?false:true;
+      data.forEach(item => {
+        item.checked = check;
+      });
+      this.setState({
+        checkedAll:check
+      })
+    }
+
+    handleClick=()=>{
+      
+    }
+ 
+    onCheckboxChange = (text, record, index) => () => {
+      let {data} = this.state;
+      record.checked = record.checked?false:true;
+      let checkedAll = true;
+      for(let i=0;i<data.length;i++){
+        let item = data[i];
+        if(!item.checked || item.checked == false){
+          checkedAll = false;
+          break;
+        }
+      }
+      this.setState({
+        ...this.state,
+        checkedAll
+      })
+    };
+
+    
+
+    getDefaultColumns=(columns)=>{
+      // let checkedAll = init?false:this.state.checkedAll;
+      let {checkedAll} = this.state;
+      let _defaultColumns =[{
+          title: (
+            <Checkbox
+              className="table-checkbox"
+              checked={checkedAll}
+              // indeterminate={indeterminate_bool && !this.state.checkedAll}
+              onChange={this.onAllCheckChange}
+            />
+          ),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          fixed:"left",
+          width: 50,
+          render: (text, record, index) => {
+            return <Checkbox
+                key={index}
+                className="table-checkbox"
+                checked={record.checked}
+                onClick={this.handleClick}
+                onChange={this.onCheckboxChange(text, record, index)}
+              ></Checkbox>
+          }
+        }]
+        return _defaultColumns.concat(columns);
+    }
+
+    render() {
+      const {columns} = this.props;
+      const {data} = this.state;
+      return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
+    }
+  };
+}

src/utils.js

@@ -106,4 +106,23 @@ export function removeClass(elm, className) {
       el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(' ').join('|')}(\\b|$)`, 'gi'), ' ');
     }
   });
-}
+}
+
+/**
+ * 简单数组数据对象拷贝
+ * @param {*} obj 要拷贝的对象 
+ */
+export function ObjectAssign(obj){
+  let b = obj instanceof Array;
+  let tagObj = b?[]:{};
+  if(b){//数组
+    obj.forEach(da => {
+      let _da = {};
+      Object.assign(_da,da);
+      tagObj.push(_da);
+    });
+  }else{
+    Object.assign(tagObj,obj);
+  }
+  return tagObj;
+}