From a1d039fc51cf4b04be1f6b50a1f4855831ed94af Mon Sep 17 00:00:00 2001 From: jonyshi Date: Mon, 25 Jun 2018 00:39:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E5=88=97=E5=92=8Ccheckbox?= =?UTF-8?q?=E4=B8=80=E8=B5=B7=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo25.js | 14 ++--- src/Table.js | 1 + src/TableHeader.js | 41 +++++++++++--- src/lib/newMultiSelect.js | 110 ++++++++++++++++++++++++++++++++++++++ src/utils.js | 21 +++++++- 5 files changed, 172 insertions(+), 15 deletions(-) create mode 100644 src/lib/newMultiSelect.js 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({this.onThMouseMove(event,da)}} onMouseUp={(event)=>{this.onThMouseUp(event,da)}} className={`${da.className} ${clsPrefix}-thead-th `} diff --git a/src/lib/newMultiSelect.js b/src/lib/newMultiSelect.js new file mode 100644 index 0000000..40acfa8 --- /dev/null +++ b/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{ + // let checkedAll = init?false:this.state.checkedAll; + let {checkedAll} = this.state; + let _defaultColumns =[{ + title: ( + + ), + key: "checkbox", + dataIndex: "checkbox", + fixed:"left", + width: 50, + render: (text, record, index) => { + return + } + }] + return _defaultColumns.concat(columns); + } + + render() { + const {columns} = this.props; + const {data} = this.state; + return + } + }; +} diff --git a/src/utils.js b/src/utils.js index 77134ce..428e780 100644 --- a/src/utils.js +++ b/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'), ' '); } }); -} \ No newline at end of file +} + +/** + * 简单数组数据对象拷贝 + * @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; +}