交换列处理

This commit is contained in:
“jonyshi” 2018-12-02 17:19:38 +08:00
parent 1c5c94238b
commit 2cb3fe5fe4
2 changed files with 47 additions and 12 deletions

View File

@ -253,7 +253,7 @@ class TableHeader extends Component {
{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}, //在一个拖动过程中,释放鼠标键时触发此事件
{key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件 // {key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件
]; ];
this.thEventListen(events,'',true); this.thEventListen(events,'',true);
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]); // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
@ -290,12 +290,12 @@ class TableHeader extends Component {
* 当被鼠标拖动的对象进入其容器范围内时触发此事件目标事件 * 当被鼠标拖动的对象进入其容器范围内时触发此事件目标事件
* @memberof TableHeader * @memberof TableHeader
*/ */
onDragEnter = (e) => { // onDragEnter = (e) => {
if (!this.props.draggable) return; // if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;} // if(this.drag.option === 'border'){return;}
let data = this.getCurrentEventData(e); // let data = this.getCurrentEventData(e);
if (!this.currentObj || this.currentObj.key == data.key) return; // if (!this.currentObj || this.currentObj.key == data.key) return;
}; // };
/** /**
* 在一个拖动过程中释放鼠标键时触发此事件目标事件 * 在一个拖动过程中释放鼠标键时触发此事件目标事件

View File

@ -31,24 +31,59 @@ export default function dragColumn(Table) {
}); });
return _column; return _column;
} }
cloneDeep(obj){
if( typeof obj !== 'object' || Object.keys(obj).length === 0 ){
return obj
}
let resultData = {}
return this.recursion(obj, resultData)
}
recursion(obj, data={}){
for(key in obj){
if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
data[key] = recursion(obj[key])
}else{
data[key] = obj[key]
}
}
return data
}
onDrop=(event,data)=>{ onDrop=(event,data)=>{
let {dragSource,dragTarg} = data; let {dragSource,dragTarg} = data;
let {columns} = this.state; let {columns} = this.state;
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key); let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key);
let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key); let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
for (let index = 0; index < columns.length; index++) { for (let index = 0; index < columns.length; index++) {
const da = columns[index]; const da = columns[index];
if(da.key === dragSource.key){ if(da.key === dragSource.key){
columns[index] = dragTargColum; columns[index] = dragTargColum;
} }
if(da.key === dragTarg.key){ if(da.key === dragTarg.key){
columns[index] = dragSourceColum; columns[index] = dragSourceColum;
} }
} }
let titles = [];
columns.forEach(da=>{
if(typeof da.title != "string"){
titles.push(da.title);
delete da.title;
}
});
let newColumns = null;
if(titles.length != 0){
newColumns = JSON.parse(JSON.stringify(columns));
for (let index = 0; index < newColumns.length; index++) {
newColumns[index].title = titles[index];
}
console.log("----columns----",newColumns);
}else{
newColumns = JSON.parse(JSON.stringify(columns));
}
this.setState({ this.setState({
columns:JSON.parse(JSON.stringify(columns)) columns:newColumns
}); });
} }