复杂表头拖拽

This commit is contained in:
“jonyshi” 2019-11-12 16:18:09 +08:00
parent 42181fed93
commit 7e822f3c5b
3 changed files with 57 additions and 18 deletions

View File

@ -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 {
<TableHeader
{...drop}
{...dragBorder}
columnsChildrenList={this.columnsChildrenList}
locale={this.props.locale}
minColumnWidth={minColumnWidth}
contentWidthDiff={contentWidthDiff}

View File

@ -87,7 +87,7 @@ $icon-color:#505F79;
border-bottom: 1px solid $table-th-bottom-border;
}
tr>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;
}

View File

@ -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 (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => {
@ -794,7 +818,8 @@ class TableHeader extends Component {
{da.required ? <span className='required'>*</span>:''}
{da.children}
{
dragborder && columIndex != _rowLeng? <div ref={el => (this.gap = el)} data-line-key={da.key}
// && columIndex != _rowLeng
dragborder && da.key != lastObj.key ? <div ref={el => (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`}>
<div className='online' /></div>:""