拖拽优化测试
This commit is contained in:
jonyshi
parent
50b18576a7
commit
4b1f55415f
|
|
@ -28,58 +28,6 @@ class TableHeader extends Component {
|
|||
contentWidthDiff: 0
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* 动态绑定th line 事件方法
|
||||
* @param {*} events
|
||||
* @param {*} type type 为false 为增加事件
|
||||
* @param {*} eventSource 为false 给 th 内部的div增加事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
thEventListen(events,type,eventSource){
|
||||
let {ths,cols} = this.table;
|
||||
for (let index = 0; index < ths.length; index++) {
|
||||
const element = ths[index];//.getAttribute('data-type');
|
||||
if(!element.getAttribute('data-th-fixed')){
|
||||
let colLine = null;
|
||||
if(element.children.length === 0){
|
||||
colLine = element;
|
||||
}else if(element.children.length > 0){
|
||||
colLine = element.lastElementChild;
|
||||
}else if(element.children.length === 1){
|
||||
colLine = element.children[0];
|
||||
}
|
||||
// const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const _event = events[i];
|
||||
let _dataSource = eventSource?element:colLine;
|
||||
if(type === "remove"){
|
||||
EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
|
||||
}else{
|
||||
EventUtil.addHandler(_dataSource,_event.key,_event.fun);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
|
||||
* @param {*} events
|
||||
* @param {*} type
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
bodyEventListen(events,type){
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const _event = events[i];
|
||||
if(type == "remove"){
|
||||
EventUtil.removeHandler(document.body,_event.key,_event.fun);
|
||||
}else{
|
||||
EventUtil.addHandler(document.body,_event.key,_event.fun);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
this.initTable();
|
||||
|
|
@ -87,56 +35,6 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
|
||||
componentWillUnmount(){
|
||||
if(!this.table)return;
|
||||
if (this.props.draggable){
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
if(this.props.dragborder){
|
||||
this.removeDragBorderEvent();
|
||||
}
|
||||
}
|
||||
|
||||
// componentDidMount(){
|
||||
// this.initTable();
|
||||
// this.initEvent();
|
||||
// }
|
||||
|
||||
/**
|
||||
* 初始化拖拽列宽的事件处理
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
initEvent(){
|
||||
let events = [
|
||||
{key:'mouseup', fun:this.onLineMouseUp},
|
||||
{key:'mousemove', fun:this.onLineMouseMove}
|
||||
];
|
||||
|
||||
if(this.props.dragborder){
|
||||
this.thEventListen(events,'',true);//表示把事件添加到th元素上
|
||||
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
|
||||
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
|
||||
}
|
||||
if(!this.props.draggable)return;
|
||||
//拖拽交换列事件
|
||||
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除当前全局事件对象
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
removeDragBorderEvent(){
|
||||
let events = [
|
||||
{key:'mouseup', fun:this.onLineMouseUp},
|
||||
{key:'mousemove', fun:this.onLineMouseMove}
|
||||
];
|
||||
this.thEventListen(events,'remove',true);//表示把事件添加到th元素上
|
||||
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}],'remove');//表示把事件添加到竖线
|
||||
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}],'remove');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取table的属性存放在this.table 中。(公用方法)
|
||||
* @returns
|
||||
|
|
@ -152,6 +50,7 @@ class TableHeader extends Component {
|
|||
table.table = tableDome;
|
||||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
}
|
||||
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
|
||||
|
|
@ -177,43 +76,95 @@ class TableHeader extends Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
initEvent(){
|
||||
let events = [
|
||||
{key:'mouseup', fun:this.onTrMouseUp},
|
||||
{key:'mousemove', fun:this.onTrMouseMove},
|
||||
{key:'mousedown', fun:this.onTrMouseDown}
|
||||
];
|
||||
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
|
||||
this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
|
||||
}
|
||||
|
||||
|
||||
eventListen(events,type,eventSource){
|
||||
let {tr} = this.table;
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const _event = events[i];
|
||||
if(type === "remove"){
|
||||
EventUtil.removeHandler(eventSource,_event.key,_event.fun);
|
||||
}else{
|
||||
EventUtil.addHandler(eventSource,_event.key,_event.fun);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*相关滚动条联动操作
|
||||
*
|
||||
*根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
optTableMargin =(table,scrollbarWidth)=>{
|
||||
if(table){
|
||||
table.style.marginBottom = scrollbarWidth + "px"
|
||||
getOnLineObject = (_element) =>{
|
||||
let type = _element.getAttribute('data-type'),elementObj = null;
|
||||
if(!type){
|
||||
let element = _element.parentElement||parentNode;//兼容写法。
|
||||
if(element.getAttribute('data-type')){
|
||||
elementObj = element;
|
||||
}
|
||||
}else{
|
||||
elementObj = _element;
|
||||
}
|
||||
return elementObj;
|
||||
}
|
||||
|
||||
optTableScroll = (table,overflow ={})=>{
|
||||
if(table){
|
||||
const innerTable = table.querySelector('.u-table-body-inner');
|
||||
if(innerTable){
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 调整列宽的down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onTrMouseDown = (e) => {
|
||||
Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e) ,
|
||||
targetEvent = Event.getTarget(event);
|
||||
const { clsPrefix, contentTable } = this.props;
|
||||
console.log(" ------------------onTrMouseDown------------------ ");
|
||||
let currentElement = this.getOnLineObject(targetEvent);
|
||||
if(!currentElement)return;
|
||||
let type = currentElement.getAttribute('data-type');
|
||||
console.log("type : ",type);
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
if(type == 'online' && this.props.dragborder){
|
||||
|
||||
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
|
||||
let defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
let currentObj = this.table.cols[currentIndex];
|
||||
this.drag.option = "border";//拖拽操作
|
||||
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);
|
||||
}else if(type != 'online' && this.props.draggable){
|
||||
|
||||
}else{
|
||||
console.log("onTrMouseDown dragborder or draggable is all false !");
|
||||
return ;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 调整列宽的move事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseMove = (e) => {
|
||||
onTrMouseMove = (e) => {
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
|
||||
Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
if (!this.props.dragborder) return;
|
||||
if(this.drag.option != "border"){
|
||||
return false;
|
||||
}
|
||||
if(this.props.dragborder && this.drag.option == "border"){
|
||||
console.log(" --onTrMouseMove--border- ",this.drag.option);
|
||||
//移动改变宽度
|
||||
let currentCols = this.table.cols[this.drag.currIndex];
|
||||
let diff = (event.x - this.drag.oldLeft);
|
||||
|
|
@ -259,59 +210,96 @@ class TableHeader extends Component {
|
|||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 调整列宽的down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseDown = (e) => {
|
||||
Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
const { clsPrefix, contentTable } = this.props;
|
||||
if (!this.props.dragborder) return;
|
||||
let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
|
||||
let defaultWidth = Event.getTarget(event).getAttribute("data-th-width");
|
||||
let currentObj = this.table.cols[currentIndex];
|
||||
this.drag.option = "border";//拖拽操作
|
||||
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);
|
||||
};
|
||||
}else if(this.props.draggable && this.drag.option == "draggable"){
|
||||
console.log(" --onTrMouseMove--draggable- ",this.drag.option);
|
||||
}else{
|
||||
// console.log("onTrMouseMove dragborder or draggable is all false !");
|
||||
// return ;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整列宽的up事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseUp = (event) => {
|
||||
onTrMouseUp = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
let width = this.drag.newWidth;
|
||||
this.clearDragBorder(event);
|
||||
this.mouseClear();
|
||||
this.props.onDropBorder && this.props.onDropBorder(event,width);
|
||||
};
|
||||
|
||||
/**
|
||||
* 调整列宽到区域以外的up事件
|
||||
*/
|
||||
bodyonLineMouseMove = (event) => {
|
||||
this.clearDragBorder(event);
|
||||
};
|
||||
|
||||
clearDragBorder(){
|
||||
mouseClear(){
|
||||
if(!this.drag || !this.drag.option)return;
|
||||
let {rows} = this.props;
|
||||
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
this.drag = {
|
||||
option:""
|
||||
};
|
||||
if (this.props.draggable){
|
||||
this.removeDragAbleEvent();
|
||||
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
|
||||
* @param {*} events
|
||||
* @param {*} type
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
bodyonLineMouseUp = (events,type) =>{
|
||||
if(!this.drag || !this.drag.option)return;
|
||||
console.log("----bodyEventListen",this.drag);
|
||||
this.mouseClear();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*相关滚动条联动操作
|
||||
*
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
optTableMargin =(table,scrollbarWidth)=>{
|
||||
if(table){
|
||||
table.style.marginBottom = scrollbarWidth + "px"
|
||||
}
|
||||
}
|
||||
|
||||
optTableScroll = (table,overflow ={})=>{
|
||||
if(table){
|
||||
const innerTable = table.querySelector('.u-table-body-inner');
|
||||
if(innerTable){
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//---拖拽列宽代码逻辑----start-----
|
||||
|
||||
|
|
@ -593,8 +581,9 @@ class TableHeader extends Component {
|
|||
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
|
||||
return (
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{rows.map((row, index) => {
|
||||
let _rowLeng = (row.length-1);
|
||||
return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
@ -642,17 +631,16 @@ class TableHeader extends Component {
|
|||
thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
|
||||
}
|
||||
thClassName += ` ${fixedStyle}`;
|
||||
|
||||
if(!da.fixed){
|
||||
if(!da.fixed && columIndex != _rowLeng){
|
||||
|
||||
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed}
|
||||
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
|
||||
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} data-row-leng="1111111111111" >
|
||||
{da.children}
|
||||
{
|
||||
dragborder ? <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 id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
|
||||
<div className='online' /></div>:""
|
||||
}
|
||||
</th>)
|
||||
}else{
|
||||
|
|
@ -665,7 +653,7 @@ class TableHeader extends Component {
|
|||
}
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
)})}
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue