forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

兼容ie11处理

This commit is contained in:
jonyshi 2019-04-23 17:02:07 +08:00
parent 05557d536d
commit fb257a43d1
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/TableHeader.js
View File

@ -55,6 +55,7 @@ class TableHeader extends Component {
if(this.props.dragborder){ if(this.props.dragborder){
this.removeDragBorderEvent(); this.removeDragBorderEvent();
} }
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
} }
/** /**
@ -104,6 +105,9 @@ class TableHeader extends Component {
initEvent(){ initEvent(){
this.dragBorderEventInit();//列宽 this.dragBorderEventInit();//列宽
this.dragAbleEventInit();//交换列 this.dragAbleEventInit();//交换列
if(this.table && this.table.tr){
this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
}
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
} }
@ -115,7 +119,7 @@ class TableHeader extends Component {
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}
]; ];
// console.log(" ---- ",this.table.tr); // console.log(" ---- ",this.table.tr);
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上 this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
@ -128,7 +132,7 @@ class TableHeader extends Component {
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,'remove',this.table.tr[0]); this.eventListen(events,'remove',this.table.tr[0]);
} }
@ -203,7 +207,7 @@ class TableHeader extends Component {
this.drag.currIndex = currentIndex; this.drag.currIndex = currentIndex;
// console.log(" ------------------onTrMouseDown------this.drag------------ ",this.drag); // 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 ;
} }
}; };
@ -234,7 +238,9 @@ class TableHeader extends Component {
} }
const newTableWidth = this.drag.tableWidth + diff +'px'; const newTableWidth = this.drag.tableWidth + diff +'px';
this.table.table.style.width = newTableWidth;//改变table的width this.table.table.style.width = newTableWidth;//改变table的width
this.table.innerTableBody.style.width = newTableWidth ; if(this.table.innerTableBody){//TODO 后续需要处理此处
this.table.innerTableBody.style.width = newTableWidth ;
}
let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ; let showScroll = contentDomWidth - (this.drag.tableWidth + diff) - scrollbarWidth ;
//表头滚动条处理 //表头滚动条处理
@ -384,16 +390,17 @@ class TableHeader extends Component {
let currentIndex = parseInt(target.getAttribute("data-line-index")); let currentIndex = parseInt(target.getAttribute("data-line-index"));
let currentKey = target.getAttribute('data-line-key'); let currentKey = target.getAttribute('data-line-key');
var crt = target.cloneNode(true); if(event.dataTransfer.setDragImage){
// console.log(" -------crt-------",crt); var crt = target.cloneNode(true);
crt.style.backgroundColor = "#ebecf0"; // console.log(" -------crt-------",crt);
crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步 crt.style.backgroundColor = "#ebecf0";
crt.style.height = "40px"; crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
// crt.style['line-height'] = "40px"; crt.style.height = "40px";
// document.body.appendChild(crt); // crt.style['line-height'] = "40px";
document.getElementById(this._table_none_cont_id).appendChild(crt); // document.body.appendChild(crt);
document.getElementById(this._table_none_cont_id).appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.setDragImage(crt, 0, 0);
}
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", currentKey); event.dataTransfer.setData("Text", currentKey);
@ -426,7 +433,8 @@ class TableHeader extends Component {
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return; if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){ if(target.nodeName.toUpperCase() === "TH"){
// console.log("-onDragEnter-----",target); // console.log("-onDragEnter-----",target);
target.style.border = "2px dashed rgba(5,0,0,0.25)"; // target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)'; // target.style.backgroundColor = 'rgb(235, 236, 240)';
// target.style['box-sizing'] = 'border-box'; // target.style['box-sizing'] = 'border-box';
} }
@ -435,7 +443,8 @@ class TableHeader extends Component {
onDragEnd = (e) => { onDragEnd = (e) => {
let event = Event.getEvent(e) , let event = Event.getEvent(e) ,
target = Event.getTarget(event); target = Event.getTarget(event);
this._dragCurrent.style = ""; this._dragCurrent.setAttribute("style","");
// this._dragCurrent.style = "";
document.getElementById(this._table_none_cont_id).innerHTML = ""; document.getElementById(this._table_none_cont_id).innerHTML = "";
let data = this.getCurrentEventData(this._dragCurrent); let data = this.getCurrentEventData(this._dragCurrent);
@ -454,7 +463,8 @@ class TableHeader extends Component {
if(target.nodeName.toUpperCase() === "TH"){ if(target.nodeName.toUpperCase() === "TH"){
// console.log("--onDragLeave----",target); // console.log("--onDragLeave----",target);
// console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent); // console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
target.style = ""; // target.style = "";
target.setAttribute("style","");
// this._dragCurrent.style = ""; // this._dragCurrent.style = "";
} }
} }