JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

拖拽table优化测试完成

This commit is contained in:
jonyshi 2019-04-22 10:24:21 +08:00
parent a9ccbaa37e
commit 104f7c8cab
1 changed files with 133 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/TableHeader.js
View File

@ -11,6 +11,13 @@ const propTypes = {
rows: PropTypes.array rows: PropTypes.array
}; };
function getDiv(id){
let div = document.createElement("div");
div.id = id;
return div;
}
class TableHeader extends Component { class TableHeader extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -32,6 +39,14 @@ class TableHeader extends Component {
componentDidUpdate(){ componentDidUpdate(){
this.initTable(); this.initTable();
this.initEvent(); this.initEvent();
}
componentDidMount(){
let uid = "_table_uid_"+new Date().getTime();
this._table_none_cont_id = uid;
let div = getDiv(uid);
document.querySelector("body").appendChild(div);
} }
@ -77,15 +92,25 @@ class TableHeader extends Component {
} }
} }
/**
* 事件初始化
*/
initEvent(){ initEvent(){
this.dragBorderEventInit();//列宽
this.dragAbleEventInit();//交换列
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
}
/**
* 拖拽列宽事件的监听
*/
dragBorderEventInit (){
let events = [ let events = [
{key:'mouseup', fun:this.onTrMouseUp}, {key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove}, {key:'mousemove', fun:this.onTrMouseMove},
{key:'mousedown', fun:this.onTrMouseDown} {key:'mousedown', fun:this.onTrMouseDown}
]; ];
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
} }
@ -135,7 +160,8 @@ class TableHeader extends Component {
console.log("type : ",type); console.log("type : ",type);
if(!this.props.dragborder && !this.props.draggable)return; if(!this.props.dragborder && !this.props.draggable)return;
if(type == 'online' && this.props.dragborder){ if(type == 'online' && this.props.dragborder){
if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable',false);//添加交换列效果
let currentIndex = parseInt(currentElement.getAttribute("data-line-index")); let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
let defaultWidth = currentElement.getAttribute("data-th-width"); let defaultWidth = currentElement.getAttribute("data-th-width");
let currentObj = this.table.cols[currentIndex]; let currentObj = this.table.cols[currentIndex];
@ -147,7 +173,13 @@ class TableHeader extends Component {
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth); this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
console.log("====================",this.drag); console.log("====================",this.drag);
}else if(type != 'online' && this.props.draggable){ }else if(type != 'online' && this.props.draggable){
if (!this.props.draggable) return;
targetEvent.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
this.drag.currIndex = currentIndex;
console.log(" ------------------onTrMouseDown------this.drag------------ ",this.drag);
}else{ }else{
console.log("onTrMouseDown dragborder or draggable is all false !"); console.log("onTrMouseDown dragborder or draggable is all false !");
return ; return ;
@ -170,6 +202,7 @@ class TableHeader extends Component {
let diff = (event.x - this.drag.oldLeft); let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff; let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth; this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){ // if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){ if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px'; currentCols.style.width = newWidth +'px';
@ -237,10 +270,17 @@ class TableHeader extends Component {
this.drag = { this.drag = {
option:"" option:""
}; };
this.clearThsDr();
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex}; let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data); this.props.afterDragColWidth && this.props.afterDragColWidth(data);
} }
clearThsDr =()=>{
let ths = this.table.ths;
for (let index = 0; index < ths.length; index++) {
ths[index].setAttribute('draggable',false);//去掉交换列效果
}
}
/** /**
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理 * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
@ -277,104 +317,50 @@ class TableHeader extends Component {
} }
} }
//---拖拽交换列代码----start-----
//---拖拽列宽代码逻辑----start-----
/**
* 调整交换列down事件
* @memberof TableHeader
*/
dragAbleMouseDown = (e) => {
// Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.draggable) return;
let th = this.getThDome(event.target);
if(!th)return;
event.target.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = event.target;
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'',true);//th
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
this.addDragAbleEvent(); //添加拖拽交换列的事件
}
/**
* 调整交换列up事件
* @memberof TableHeader
*/
dragAbleMouseUp = (e) => {
this.currentDome.setAttribute('draggable',false);//添加交换列效果
this.removeDragAbleEvent();
this.thEventListen([{key:'mouseup',fun:this.dragAbleMouseUp}],'remove',true);//th
//拖拽交换列事件
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
this.initEvent();
}
/** /**
* 添加换列的事件监听 * 添加换列的事件监听
*/ */
addDragAbleEvent (){ dragAbleEventInit (){
if (!this.props.draggable) return;
let events = [ let events = [
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发 {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件 {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件 {key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
];
this.thEventListen(events,'',true);
}
/** {key:'dragenter', fun:this.onDragEnter},
* 删除换列的事件监听 {key:'dragend', fun:this.onDragEnd},
*/ {key:'dragleave', fun:this.onDragLeave},
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); this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
} }
/** /**
* 开始调整交换列的事件 * 开始调整交换列的事件
*/ */
onDragStart = (e) => { onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return; if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;} if(this.drag && this.drag.option != 'dragAble'){return;}
let th = this.getThDome(event.target); let event = Event.getEvent(e) ,
if(!th)return; target = Event.getTarget(event);
let currentIndex = parseInt(th.getAttribute("data-line-index"));
let currentIndex = parseInt(target.getAttribute("data-line-index"));
let currentKey = target.getAttribute('data-line-key');
var crt = target.cloneNode(true);
console.log(" -------crt-------",crt);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
crt.style.height = "44px";
// crt.style['line-height'] = "44px";
// document.body.appendChild(crt);
document.getElementById(this._table_none_cont_id).appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0);
let currentKey = event.target.getAttribute('data-line-key');
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey); event.dataTransfer.setData("Text", currentKey);
this.currentObj = this.props.rows[0][currentIndex]; this.currentObj = this.props.rows[0][currentIndex];
// event.dataTransfer.setDragImage(event.target, 0, 0);
}; };
onDragOver = (e) => { onDragOver = (e) => {
@ -387,24 +373,63 @@ class TableHeader extends Component {
*/ */
onDrop = (e) => { onDrop = (e) => {
if (!this.props.draggable) return; if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;} if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentDome.setAttribute('draggable',false);//添加交换列效果 this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(e); let data = this.getCurrentEventData(target);
if(!data)return; if(!data)return;
if (!this.currentObj || this.currentObj.key == data.key) return; if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return; if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data}); this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
}; };
onDragEnter = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent = target;
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
console.log("-onDragEnter-----",target);
target.style.border = "2px dashed #000";
}
}
onDragEnd = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this._dragCurrent.style = "";
document.getElementById(this._table_none_cont_id).innerHTML = "";
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
console.log(this.drag.newWidth+"--------------onDragEnd--target--",target);
console.log("--------------onDragEnd----",this._dragCurrent);
}
onDragLeave = (e) => {
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
console.log("--onDragLeave----",target);
// console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
target.style = "";
// this._dragCurrent.style = "";
}
}
/** /**
* 获取当前th上的对象数据 * 获取当前th上的对象数据
* @param {*} e * @param {*} e
* @returns * @returns
* @memberof TableHeader * @memberof TableHeader
*/ */
getCurrentEventData(e){ getCurrentEventData(th){
let event = Event.getEvent(e);
let th = this.getThDome(event.target)
if(!th){ if(!th){
console.log(" event target is not th ! "); console.log(" event target is not th ! ");
return null; return null;
@ -418,24 +443,6 @@ class TableHeader extends Component {
return null; return null;
} }
} }
/**
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
* @param {*} element
* @returns <th />对象
* @memberof TableHeader
*/
getThDome(element){
let _tagName = element.tagName.toLowerCase();
if(element.getAttribute('data-filter-type') === 'filterContext')return null;
if(_tagName === 'i')return null;
if(_tagName != 'th'){
return this.getThDome(element.parentElement);
}else{
return element;
}
}
//---拖拽列交换----end----- //---拖拽列交换----end-----
/** /**
@ -631,13 +638,12 @@ class TableHeader extends Component {
thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`; thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
} }
thClassName += ` ${fixedStyle}`; thClassName += ` ${fixedStyle}`;
if(!da.fixed && columIndex != _rowLeng){ if(!da.fixed ){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} data-row-leng="1111111111111" >
{da.children} {da.children}
{ {
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key} dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width} data-line-index={columIndex} data-th-width={da.width}
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}> data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
<div className='online' /></div>:"" <div className='online' /></div>:""