From 7e822f3c5b29daccaef7fe310aec78954015424a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cjonyshi=E2=80=9D?= Date: Tue, 12 Nov 2019 16:18:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E6=9D=82=E8=A1=A8=E5=A4=B4=E6=8B=96?= =?UTF-8?q?=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Table.js | 17 +++++++++++++--- src/Table.scss | 9 ++++++--- src/TableHeader.js | 49 ++++++++++++++++++++++++++++++++++------------ 3 files changed, 57 insertions(+), 18 deletions(-) diff --git a/src/Table.js b/src/Table.js index 7db1f8b..b55646d 100644 --- a/src/Table.js +++ b/src/Table.js @@ -124,6 +124,10 @@ class Table extends Component { } else { expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys; } + + this.columnsChildrenList = [];//复杂表头、所有叶子节点 + this.getColumnsChildrenList(props.columns);//复杂表头、所有叶子节点 + this.state = { expandedRowKeys, data: props.data, @@ -164,7 +168,7 @@ class Table extends Component { this.tableUid = null; this.contentTable = null; this.leftColumnsLength //左侧固定列的长度 - this.centerColumnsLength //非固定列的长度 + this.centerColumnsLength //非固定列的长度 } componentWillMount() { this.centerColumnsLength = this.columnManager.centerColumns().length @@ -418,6 +422,13 @@ class Table extends Component { return this.props.expandedRowKeys || this.state.expandedRowKeys; } + //todo 后续改进 + getColumnsChildrenList = (columns)=>{ + columns.forEach(da=>{ + da.children?this.getColumnsChildrenList(da.children):this.columnsChildrenList.push(da); + }) + } + getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) { const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable, onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props; @@ -430,11 +441,10 @@ class Table extends Component { rowSpan: rows.length, }); } - const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null); let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {}; let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {}; - let contentWidthDiff = 0; + let contentWidthDiff = 0; //非固定表格,宽度不够时自动扩充 if (!fixed) { contentWidthDiff = this.state.contentWidthDiff @@ -443,6 +453,7 @@ class Table extends Component { th:last-child{ - border-right: none; + // border-right: none; } } tr { @@ -590,10 +590,13 @@ $icon-color:#505F79; .online{ height: 100%; - width: 1px; - background:transparent;//兼容火狐浏览器，如果table设置border， + width: 4px; + // background:transparent;//兼容火狐浏览器，如果table设置border， margin: 0 auto; } + .online:hover{ + background:#000000; + } .online-hover{ background:#000000; } diff --git a/src/TableHeader.js b/src/TableHeader.js index 2fd9c3d..441daad 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -60,7 +60,10 @@ class TableHeader extends Component { if(this.props.dragborder){ this.removeDragBorderEvent(); } - this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]); + this.doEventList(this.table.tr,(tr)=>{ + this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',tr); + }) + // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]); this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'remove',document.body); } @@ -124,12 +127,22 @@ class TableHeader extends Component { this.dragAbleEventInit();//交换列 } if(this.table && this.table.tr){ - this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup + // this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup + this.doEventList(this.table.tr,(tr)=>{ + this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',tr);//body mouseup + }) } this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup } } + + doEventList(trs,action){ + for (let index = 0; index < trs.length; index++) { + action(trs[index]); + } + } + /** * 拖拽列宽事件的监听 */ @@ -140,7 +153,10 @@ class TableHeader extends Component { {key:'mousemove', fun:this.onTrMouseMove}, // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差 ]; - this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 + this.doEventList(this.table.tr,(tr)=>{ + this.eventListen(events,'',tr);//表示把事件添加到th元素上 + }) + // this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 } /** @@ -151,7 +167,10 @@ class TableHeader extends Component { {key:'mouseup', fun:this.onTrMouseUp}, {key:'mousemove', fun:this.onTrMouseMove}, ]; - this.eventListen(events,'remove',this.table.tr[0]); + // this.eventListen(events,'remove',this.table.tr[0]); + this.doEventList(this.table.tr,(tr)=>{ + this.eventListen(events,'remove',this.table.tr); + }) } eventListen(events,type,eventSource){ @@ -197,7 +216,7 @@ class TableHeader extends Component { Event.stopPropagation(e); let event = Event.getEvent(e) , targetEvent = Event.getTarget(event); - const { clsPrefix, contentTable,lastShowIndex } = this.props; + const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props; // let currentElement = this.getOnLineObject(targetEvent); let currentElement = this.getTargetToType(targetEvent); if(!currentElement)return; @@ -207,18 +226,23 @@ class TableHeader extends Component { if(!this.props.dragborder)return; targetEvent.setAttribute('draggable',false);//添加交换列效果 let currentIndex = parseInt(currentElement.getAttribute("data-line-index")); - let defaultWidth = currentElement.getAttribute("data-th-width"); - let currentObj = this.table.cols[currentIndex]; + let defaultWidth = currentElement.getAttribute("data-th-width"); this.drag.option = "border";//拖拽操作 + if(columnsChildrenList){ + let columnKey = currentElement.getAttribute("data-line-key"); + if(columnKey){ + currentIndex = columnsChildrenList.findIndex(da=>da.key.toLowerCase() === columnKey.toLowerCase()); + } + } + console.log("currentIndex :",currentIndex); + let currentObj = this.table.cols[currentIndex]; this.drag.currIndex = currentIndex; this.drag.oldLeft = event.x; this.drag.oldWidth = parseInt((currentObj).style.width); this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth; this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth); - // console.log(" ----- ",this.drag); if(!this.tableOldWidth){ this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth(); - // console.log(" this.tableOldWidth--- ",this.tableOldWidth); } if(!this.lastColumWidth){ this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width); @@ -727,10 +751,10 @@ class TableHeader extends Component { render() { const { clsPrefix, rowStyle,draggable, - dragborder, rows,filterable,fixed,lastShowIndex, + dragborder, rows,filterable,fixed,lastShowIndex,columnsChildrenList } = this.props; - let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {}; + let lastObj = columnsChildrenList[columnsChildrenList.length-1]; return ( this._thead = _thead} > {rows.map((row, index) => { @@ -794,7 +818,8 @@ class TableHeader extends Component { {da.required ? *:''} {da.children} { - dragborder && columIndex != _rowLeng?
(this.gap = el)} data-line-key={da.key} + // && columIndex != _rowLeng + dragborder && da.key != lastObj.key ?
(this.gap = el)} data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
:""