diff --git a/demo/demolist/Demo25.js b/demo/demolist/Demo25.js index 3031d6f..7005ce0 100644 --- a/demo/demolist/Demo25.js +++ b/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"}} />; } } diff --git a/src/Table.js b/src/Table.js index 3ad7748..2f3980f 100644 --- a/src/Table.js +++ b/src/Table.js @@ -476,6 +476,7 @@ class Table extends Component{ } getLeftFixedTable() { + debugger; return this.getTable({ columns: this.columnManager.leftColumns(), fixed: 'left', diff --git a/src/TableHeader.js b/src/TableHeader.js index 1db2fc3..0aec815 100644 --- a/src/TableHeader.js +++ b/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(