From 568e5fa96b0358cc5eceb22c51100f3f26870adc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cjonyshi=E2=80=9D?= Date: Sat, 1 Dec 2018 13:45:06 +0800 Subject: [PATCH] =?UTF-8?q?table=20theader=20=E9=87=8D=E6=9E=84=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E5=85=B1=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TableHeader.js | 172 ++++++++++++++++++++++++++++++--------------- 1 file changed, 114 insertions(+), 58 deletions(-) diff --git a/src/TableHeader.js b/src/TableHeader.js index 5ba03d8..e8eccb7 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -70,55 +70,31 @@ class TableHeader extends Component { // shouldComponentUpdate(nextProps) { // return !shallowequal(nextProps, this.props); // } - + /** * 动态绑定th line 事件 * type 为false 为增加事件 * eventSource 为false 给 th 内部的div增加事件 */ - thEventListen(events,type){ + thEventListen(events,type,eventSource){ let {ths,cols} = this.table; for (let index = 0; index < ths.length; index++) { const element = ths[index];//.getAttribute('data-type'); if(!element.getAttribute('data-th-fixed')){ + const colLine = element.children[0]; for (let i = 0; i < events.length; i++) { const _event = events[i]; - if(type == "remove"){ - element.removeEventListener(_event.key,_event.fun); + let _dataSource = eventSource?element:colLine; + if(type === "remove"){ + _dataSource.removeEventListener(_event.key,_event.fun); }else{ - element.addEventListener(_event.key,_event.fun); + _dataSource.addEventListener(_event.key,_event.fun); } } } } } - /** - * 动态绑定th line 事件 - * type 为false 为增加事件 - * eventSource 为false 给 th 内部的div增加事件 - */ - // thEventListen(events,type,eventSource){ - // let {ths,cols} = this.table; - // for (let index = 0; index < ths.length; index++) { - // const element = ths[index];//.getAttribute('data-type'); - // const colLine = element.children[0]; - // debugger; - // // const online = (ths[index]).get - // // .getAttribute('data-type'); - // if(!element.getAttribute('data-th-fixed')){ - // for (let i = 0; i < events.length; i++) { - // const _event = events[i]; - // let _dataSource = eventSource?element:colLine; - // if(type == "remove"){ - // _dataSource.removeEventListener(_event.key,_event.fun); - // }else{ - // _dataSource.addEventListener(_event.key,_event.fun); - // } - // } - // } - // } - // } bodyEventListen(events,type){ for (let i = 0; i < events.length; i++) { @@ -134,13 +110,13 @@ class TableHeader extends Component { componentDidUpdate(){ this.initTable(); this.initEvent(); - this.initDragAbleEvent(); + // this.initDragAbleEvent(); } componentDidMount(){ this.initTable(); this.initEvent(); - this.initDragAbleEvent(); + // this.initDragAbleEvent(); } /** @@ -148,12 +124,28 @@ class TableHeader extends Component { */ initEvent(){ let events = [ - {key:'mousedown',fun:this.onLineMouseDown}, {key:'mouseup', fun:this.onLineMouseUp}, {key:'mousemove', fun:this.onLineMouseMove} ]; - this.thEventListen(events); + this.thEventListen(events,'',true);//表示把事件添加到th元素上 + this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线 this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]); + + //拖拽交换列事件 + this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到竖线 + } + + /** + * 移除拖拽宽度的事件 + */ + removeDragBorderEvent(){ + let events = [ + {key:'mouseup', fun:this.onLineMouseUp}, + {key:'mousemove', fun:this.onLineMouseMove} + ]; + this.thEventListen(events,'remove',true);//表示把事件添加到th元素上 + this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}],'remove');//表示把事件添加到竖线 + this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}],'remove'); } /** @@ -177,7 +169,6 @@ class TableHeader extends Component { const { clsPrefix } = this.props; Event.stopPropagation(e); let event = Event.getEvent(e); - console.log(event.target,this.drag.option); if(this.drag.option != "border"){ return false; } @@ -188,14 +179,13 @@ class TableHeader extends Component { if(newWidth > this.drag.minWidth){ currentCols.style.width = newWidth +'px'; } - console.log("------------",newWidth); }; onLineMouseDown = (e) => { Event.stopPropagation(e); let event = Event.getEvent(e); const { clsPrefix, contentTable } = this.props; - + console.log("--this.onLineMouseDown----"); let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index")); let defaultWidth = Event.getTarget(event).getAttribute("data-th-width"); let currentObj = this.table.cols[currentIndex]; @@ -221,45 +211,111 @@ class TableHeader extends Component { } // --------------------------------------th---------------------------------------- - + + dragAbleMouseDown = (e) => { + Event.stopPropagation(e); + let event = Event.getEvent(e); + event.target.setAttribute('draggable',true);//添加交换列效果 + this.drag.option = 'dragAble'; + this.removeDragBorderEvent();//清理掉拖拽列宽的事件 + this.addDragAbleEvent(); //添加拖拽交换列的事件 + } + /** * 拖拽交换列的事件处理 */ - initDragAbleEvent(){ + addDragAbleEvent (){ let events = [ - {key:'dragstart',fun:this.onDragStart}, - {key:'dragover', fun:this.onDragOver}, - {key:'drop', fun:this.onDrop}, - {key:'dragenter', fun:this.onDragEnter} + {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发 + {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件 + {key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件 + {key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件 ]; - this.thEventListen(events,'',"th"); + this.thEventListen(events,'',true); // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]); } - onDragStart = (event, data) => { + // removeDragAbleEvent(){ + // let events = [ + // {key:'dragstart',fun:this.onDragStart}, + // {key:'dragover', fun:this.onDragOver}, + // {key:'drop', fun:this.onDrop}, + // {key:'dragenter', fun:this.onDragEnter} + // ]; + // this.thEventListen(events,'remove',true); + // } + + onDragStart = (e) => { + let event = Event.getEvent(e); + if(this.drag.option === 'border'){return;} + let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index")); + + let currentKey = event.target.getAttribute('data-line-key'); event.dataTransfer.effectAllowed = "move"; - event.dataTransfer.setData("Text", data.key); - this.currentObj = data; + event.dataTransfer.setData("Text", currentKey); + this.currentObj = this.props.rows[0][currentIndex]; event.dataTransfer.setDragImage(event.target, 0, 0); - this.props.onDragStart(event, data); + // this.props.onDragStart(event, this.currentObj); }; - onDragOver = (event, data) => { - if (!this.currentObj || this.currentObj.key == data.key) return; + onDragOver = (e) => { + // let event = Event.getEvent(e); + // if(this.drag.option === 'border'){return;} + // let data = this.getCurrentEventData(e); + // if (!this.currentObj || this.currentObj.key == data.key) return; event.preventDefault(); - this.props.onDragOver(event, data); }; - onDragEnter = (event, data) => { - if (!this.currentObj || this.currentObj.key == data.key) return; - this.props.onDragEnter(event, data); + /** + * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】 + * @memberof TableHeader + */ + onDragEnter = (e) => { + // let event = Event.getEvent(e); + if(this.drag.option === 'border'){return;} + let data = this.getCurrentEventData(e); + if (!this.currentObj || this.currentObj.key == data.key) return; + // this.props.onDragEnter(event, data); }; - onDrop = (event, data) => { + /** + * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】 + * @memberof TableHeader + */ + onDrop = (e) => { + if(this.drag.option === 'border'){return;} + let data = this.getCurrentEventData(e); if (!this.currentObj || this.currentObj.key == data.key) return; - this.props.onDrop(event, data); + this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data}); }; + getCurrentEventData(e){ + let event = Event.getEvent(e); + let key = event.target.getAttribute('data-line-key'); + let data = this.props.rows[0].find(da=>da.key == key); + if(data){ + return data; + }else{ + console.log(" getCurrentEventData data is null "); + return null; + } + } + + // --------------------------------------拖拽列交换---------------------------------------- + + + + + + + + + + + + + + onMouseOver = (event, data) => { //如果是固定列没有拖拽功能 if (this.border || data.fixed) return; @@ -694,7 +750,7 @@ class TableHeader extends Component { key:columIndex }; da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:""; - return () + return () } })}