复杂表头拖拽
This commit is contained in:
“jonyshi”
parent
42181fed93
commit
7e822f3c5b
17
src/Table.js
17
src/Table.js
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>:""
|
||||
|
|
|
|||
Loading…
Reference in New Issue