innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

Merge branch 'master' into ne-drag

This commit is contained in:
“jonyshi” 2018-12-02 09:53:43 +08:00
parent 7fbf78c95c 5d20ecc6db
commit 97648e402e
4 changed files with 135 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Table.scss
View File

@ -388,26 +388,14 @@ $table-move-in-color: $bg-color-base;
.online-hover{
background:#000000;
}
}
.th-drag-gap{
background:transparent;
}
.th-drag-gap-hover{
// background: #ccc;
&-drag-gap:hover{
cursor: col-resize;
.online{
background: #000000
}
}
.th-drag-gap>div{
background:transparent;
}
.th-drag-gap-hover>div{
background: #000000
}
// &.th-can-not-drag{
// .th-drag-gap-hover{
// cursor: none;
// width: 0px;
// }
// }
}
&-th:last-child {
&-drag-gap{

377
src/TableHeader.js
View File

@ -1,4 +1,5 @@
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import PropTypes from "prop-types";
import shallowequal from "shallowequal";
import { throttle, debounce } from "throttle-debounce";
@ -17,13 +18,6 @@ class TableHeader extends Component {
constructor(props) {
super(props);
this.currentObj = null;
this.state = {
// border: false,
// dragAbleOrBord:props.draggable?"able":"", //border 拖拽列宽，able 交换列,
// dragAbleOrBordStart:"", // borderStart 开始拖拽宽度 ableStart 开始交换列
// draggable:props.draggable?props.draggable:false,
};
//拖拽宽度处理
if (!props.dragborder) return;
this.border = false;
@ -32,14 +26,10 @@ class TableHeader extends Component {
initPageLeftX: 0,
initLeft: 0,
x: 0,
width: 0
width: 0,
option:''
};
this.table = null;
// let _da = {};
// Object.assign(_da,this.props.rows[0]);
// this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
// let a = this.props.rows[0];
let _row = [];
this.props.rows[0] &&
this.props.rows[0].forEach(item => {
@ -52,25 +42,6 @@ class TableHeader extends Component {
contentWidthDiff: 0
};
// componentWillReceiveProps(nextProps){
// if(this.props.draggable != nextProps.draggable){
// this.setState({
// dragAbleOrBord:nextProps.draggable?"able":"", //border 拖拽列宽，able 交换列
// // draggable:nextProps.draggable,
// })
// }
// if(this.props.dragborder != nextProps.dragborder){
// this.setState({
// dragAbleOrBord:nextProps.dragborder?"border":"", //border 拖拽列宽，able 交换列
// })
// }
// }
// shouldComponentUpdate(nextProps) {
// return !shallowequal(nextProps, this.props);
// }
/**
* 动态绑定th line 事件
* type 为false 为增加事件
@ -81,7 +52,8 @@ class TableHeader extends Component {
for (let index = 0; index < ths.length; index++) {
const element = ths[index];//.getAttribute('data-type');
if(!element.getAttribute('data-th-fixed')){
const colLine = element.children[0];
const colLine = element.children.length > 1?element.lastElementChild:element.children[0];
// const colLine = element.children[0];
for (let i = 0; i < events.length; i++) {
const _event = events[i];
let _dataSource = eventSource?element:colLine;
@ -110,13 +82,11 @@ class TableHeader extends Component {
componentDidUpdate(){
this.initTable();
this.initEvent();
// this.initDragAbleEvent();
}
componentDidMount(){
this.initTable();
this.initEvent();
// this.initDragAbleEvent();
}
/**
@ -127,10 +97,13 @@ class TableHeader extends Component {
{key:'mouseup', fun:this.onLineMouseUp},
{key:'mousemove', fun:this.onLineMouseMove}
];
this.thEventListen(events,'',true);//表示把事件添加到th元素上
this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
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);//表示把事件添加到竖线
}
@ -152,6 +125,7 @@ class TableHeader extends Component {
* 获取table的属性存放在this.table 中。(公用方法)
*/
initTable(){
if(!this.props.dragborder && !this.props.draggable)return;
let el = ReactDOM.findDOMNode(this);
let tableDome = el.parentNode;
let table = {};
@ -161,14 +135,28 @@ class TableHeader extends Component {
table.ths = tableDome.getElementsByTagName("th");
}
this.table = table;
if(!this.props.dragborder)return;
if(document.getElementById("u-table-drag-thead-" + this.theadKey)){
//hao 固定列table
this.fixedTable = {};
let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
let siblingDom = _fixedParentContext.parentNode.nextElementSibling;
if (siblingDom) {
let fixedTable = siblingDom.querySelector("table");
this.fixedTable.table = fixedTable
this.fixedTable.cols = fixedTable.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
}
}
}
// --------------------th----------------------------
//---拖拽列宽代码逻辑----start-----
onLineMouseMove = (e) => {
const { clsPrefix } = this.props;
const { clsPrefix ,dragborder} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.dragborder) return;
if(this.drag.option != "border"){
return false;
}
@ -178,14 +166,18 @@ class TableHeader extends Component {
let newWidth = this.drag.oldWidth + diff;
if(newWidth > this.drag.minWidth){
currentCols.style.width = newWidth +'px';
//hao 修改表体的width
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
//hao todo
this.table.table.style.width = (parseInt(this.table.table.style.width) + diff);//改变table的width
};
onLineMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
const { clsPrefix, contentTable } = this.props;
console.log("--this.onLineMouseDown----");
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];
@ -194,7 +186,6 @@ class TableHeader extends Component {
this.drag.oldLeft = event.x;
this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
console.log("--this.drag--target----",event);
};
onLineMouseUp = (event) => {
@ -205,16 +196,21 @@ class TableHeader extends Component {
};
clearDragBorder(){
if (!this.props.dragborder) 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:""
};
}
// --------------------------------------th----------------------------------------
//---拖拽列宽代码逻辑----start-----
dragAbleMouseDown = (e) => {
Event.stopPropagation(e);
let event = Event.getEvent(e);
if (!this.props.draggable) return;
event.target.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
@ -235,18 +231,19 @@ class TableHeader extends Component {
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
}
// removeDragAbleEvent(){
// let events = [
// {key:'dragstart',fun:this.onDragStart},
// {key:'dragover', fun:this.onDragOver},
// {key:'drop', fun:this.onDrop},
// {key:'dragenter', fun:this.onDragEnter}
// ];
// this.thEventListen(events,'remove',true);
// }
removeDragAbleEvent(){
let events = [
{key:'dragstart',fun:this.onDragStart},
{key:'dragover', fun:this.onDragOver},
{key:'drop', fun:this.onDrop},
{key:'dragenter', fun:this.onDragEnter}
];
this.thEventListen(events,'remove',true);
}
onDragStart = (e) => {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
@ -255,14 +252,9 @@ class TableHeader extends Component {
event.dataTransfer.setData("Text", currentKey);
this.currentObj = this.props.rows[0][currentIndex];
event.dataTransfer.setDragImage(event.target, 0, 0);
// this.props.onDragStart(event, this.currentObj);
};
onDragOver = (e) => {
// let event = Event.getEvent(e);
// if(this.drag.option === 'border'){return;}
// let data = this.getCurrentEventData(e);
// if (!this.currentObj || this.currentObj.key == data.key) return;
event.preventDefault();
};
@ -271,11 +263,10 @@ class TableHeader extends Component {
* @memberof TableHeader
*/
onDragEnter = (e) => {
// let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let data = this.getCurrentEventData(e);
if (!this.currentObj || this.currentObj.key == data.key) return;
// this.props.onDragEnter(event, data);
};
/**
@ -283,9 +274,11 @@ class TableHeader extends Component {
* @memberof TableHeader
*/
onDrop = (e) => {
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
let data = this.getCurrentEventData(e);
if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
};
@ -300,179 +293,7 @@ class TableHeader extends Component {
return null;
}
}
// --------------------------------------拖拽列交换----------------------------------------
onMouseOver = (event, data) => {
//如果是固定列没有拖拽功能
if (this.border || data.fixed) return;
const { clsPrefix } = this.props;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}
};
ableOnMouseMove = (event, data) => {
let {dragAbleOrBord} = this.state;
if(dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart")return;
if(dragAbleOrBord === "able")return;
this.setState({
dragAbleOrBord:"able"
})
};
getOffsetLeft(obj){
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
}
onThMouseUp = (event, data) => {
this.border = false;
const { clsPrefix, rows,columns } = this.props;
let eventDom = event.target;
let optDom;
if (eventDom.classList.contains(".th-drag-gap-hover")) {
optDom = eventDom;
} else {
optDom = eventDom.querySelector(`.${clsPrefix}-thead-th-drag-gap`);
}
if (optDom) {
optDom.classList.remove("th-drag-gap-hover");
optDom.classList.add("th-drag-gap");
}
// columns[this.drag.currIndex].width = data.width;
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (
typeof this.props.afterDragColWidth == "function" &&
rows &&
rows[0] &&
this.drag.currIndex
) {
this.props.afterDragColWidth(rows[0],this.drag.currIndex);
}
};
onThMouseMove = (event, data) => {
if (!this.border) return;
//固定表头拖拽
const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered,rows} = this.props;
let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
let contentTableDom = document.getElementById(
"u-table-drag-thead-" + this.theadKey
).parentNode;
if (!this.contentTableWidth) {
const styleWidth = contentTableDom.style.width;
if (
styleWidth &&
(typeof styleWidth == "number" || styleWidth.includes("px"))
) {
this.contentTableWidth = parseInt(styleWidth);
} else {
this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
}
}
const newTableWidth = this.contentTableWidth + x;
const newWidth = this.drag.width + x;
if (newWidth < this.props.minColumnWidth) {
//清楚样式
let moveDom = event.target.querySelector(".th-drag-gap-hover");
moveDom && moveDom.classList.remove("th-drag-gap-hover");
// event.target.classList.remove('th-drag-gap-hover');
return;
}
//设置hiden的left
//"u-table-drag-hide-table"
let currentHideDom = document
.getElementById("u-table-drag-hide-table-" + dragborderKey)
.getElementsByTagName("div")[this.drag.currIndex];
currentHideDom.style.left = this.drag.initPageLeftX + x - grap + "px";
//获取最小宽度，不让拖动
// let minWidth = 0;
// for(let i=0;i<=this.drag.currIndex;i++){
// minWidth += this.drag.data[i].width;
// }
// //判断最小值后在赋值 todo
// let currLeft = this.drag.initPageLeftX+x-grap;
// console.log("currLeft minWidth ",currLeft + " "+minWidth);
// if(currLeft <= minWidth){
// return;
// }
// currentHideDom.style.left = currLeft+"px";
//设置当前的宽度
let currentData = this.drag.data[this.drag.currIndex];
currentData.width = newWidth;
let currentDom = document
.getElementById("u-table-drag-thead-" + this.theadKey)
.getElementsByTagName("th")[this.drag.currIndex];
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
// data.width = newWidth;
rows[0][this.drag.currIndex].width = newWidth;
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
//固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
const siblingDom = contentTableDom.parentNode.nextElementSibling;
if (siblingDom) {
const bodyTableDom = siblingDom.querySelector("table");
//2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
bodyTableDom.style.width = newTableWidth + "px";
//3、对应的col也要跟这变
let colDomArr = bodyTableDom.querySelectorAll("colgroup col");
colDomArr[this.drag.currIndex].style.width = newWidth + "px";
//4、设置overflow属性
}
//表头需要显示滚动条时，需兼容含有固定列
if(headerScroll){
let showScroll = contentDomWidth - newTableWidth - scrollbarWidth ;
if(bordered){
showScroll = showScroll -1;
}
const fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
const fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
const contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
if(showScroll < 0){
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
contentTableHeader.style.overflowX = 'scroll';
fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
}else{
contentTableHeader.style.overflowX = 'hidden';
fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
}
}
};
//---拖拽列交换----end-----
/**
* @description 过滤输入后的回调函数
*/
@ -641,7 +462,7 @@ class TableHeader extends Component {
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return (
<thead className={`${clsPrefix}-thead`} {...attr}>
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, columIndex, arr) => {
@ -667,82 +488,26 @@ class TableHeader extends Component {
delete da.filterdropdownfocus;
}
let thAbleObj = {},thBorObj = {},thDefaultObj = {},thLineObj = {};
let thDefaultObj = {};
let thClassName = `${da.className}`;
// if (draggable || dragborder) {
// if (draggable && dragAbleOrBordStart != "borderStart") {
thAbleObj = {
...da,
onDragStart:(e)=>{this.onDragStart(e, da)},
onDragOver:(e)=>{this.onDragOver(e, da)},
onDrop:(e)=>{this.onDrop(e, da)},
onDragEnter:(e)=>{this.onDragEnter(e, da)},
onMouseMove:(e)=>{this.ableOnMouseMove(e, da)},
onMouseDown:(e)=>{
//避免表头其他元素对其影响
const filterDom = contentTable.querySelector('.filterable');
//是否是过滤行元素，是的话不触发
const isFilterDom =filterDom ?filterDom.contains(e.target):false;
if(e.target.classList.contains('uf') ||isFilterDom){
return;
}
if(e.target.classList.contains('uf')){
return;
}
},
draggable:draggable,
// className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
key:da.key
};
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
// }
// if (dragborder && dragAbleOrBord === "border") {
// if (dragborder && dragAbleOrBordStart != "ableStart") {
thBorObj.style={'width': da.width }
// thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
thBorObj.onMouseMove = (e)=>{
if(draggable){
this.ableOnMouseMove(e, da)
}
this.onThMouseMove(e, da)
if(draggable){
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
}
thBorObj.onMouseUp = (e)=>{this.onThMouseUp(e, da)}
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
thBorObj.style= { width: da.width }
// key:i
// }
// thObj.className = thObj.className+`${fixedStyle}`;
thClassName += `${fixedStyle}`;
if(dragborder){
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += `${fixedStyle}`;
if(!da.fixed){
thLineObj = {
onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
onMouseOut:(e)=>{this.onMouseOut(e, da)},
onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
onMouseUp:(e)=>{this.onMouseUp(e, da)},
onMouseOver:(e)=>{this.onMouseOver(e, da)},
// className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
};
// if(dragAbleOrBordStart !== 'ableStart'){
thLineObj.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
// }
// }
// {...thAbleObj} {...thBorObj}
return (<th key={Math.random()+new Date().getTime()} className={thClassName}
data-th-fixed={da.fixed}
return (<th key={Math.random()+new Date().getTime()} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
{da.children}
{
da.fixed ? "":<div ref={el => (this.gap = el)} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width}
data-type="online"
// {...thLineObj}
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>
}
</th>)
{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>:""
}
</th>)
}else{
thDefaultObj = {
...da,

58
src/lib/dragColumn.js
View File

@ -32,38 +32,6 @@ export default function dragColumn(Table) {
return _column;
}
// onDragStart=(event,data)=>{
// if(this.props.onDragStart){
// this.props.onDragStart(event,data)
// }
// }
// onDragOver=(event,data)=>{
// if(this.props.onDragOver){
// this.props.onDragOver(event,data)
// }
// }
// onDragEnter=(event,data)=>{
// console.log('--------onDragEnter------------',data);
// if(data.key == "checkbox")return;
// const {columns:_columns} = this.state;
// let columns = [];
// Object.assign(columns,_columns);
// columns.forEach((da)=>da.drgHover = false)
// let current = columns.find((da)=>da.key == data.key);
// if(current.fixed)return;
// current.drgHover = true;
// this.setState({
// columns
// });
// if(this.props.onDragEnter){
// this.props.onDragEnter(event,data);
// }
// }
onDrop=(event,data)=>{
let {dragSource,dragTarg} = data;
let {columns} = this.state;
@ -84,32 +52,6 @@ export default function dragColumn(Table) {
});
}
onDrop_bak=(event,data)=>{
if(data.key == "checkbox")return;
let {columns} = this.state;
const id = event.dataTransfer.getData("Text");
let objIndex = columns.findIndex((_da,i)=>_da.key == id);
let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
// if(columns[objIndex].fixed)return;//固定列不让拖拽
// if(columns[targetIndex].fixed)return;//固定列不让拖拽
columns.forEach((da,i)=>{
da.drgHover = false;
if(da.key == id){//obj
da.dragIndex = targetIndex
}
if(da.key == data.key){//targetObj
da.dragIndex = objIndex;
}
});
let _columns = columns.sort(compare('dragIndex'));
this.setState({
columns:_columns.slice()
});
if(this.props.onDrop){
this.props.onDrop(event,data,columns);
}
}
getTarget=(evt)=>{
return evt.target || evt.srcElement;
}

57
src/utils.js
View File

@ -166,3 +166,60 @@ export function getColChildrenLength(columns,chilrenLen){
})
return chilrenLen;
}
function addHandler(element,type,handler){
if(element.addEventListener){//检测是否为DOM2级方法
element.addEventListener(type, handler, false);
}else if (element.attachEvent){//检测是否为IE级方法
element.attachEvent("on" + type, handler);
} else {//检测是否为DOM0级方法
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
//获取事件对象的兼容性写法
function getEvent(event){
return event ? event : window.event;
}
//获取事件对象目标的兼容性写法
function getTarget(event){
return event.target || event.srcElement;
}
function preventDefault(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
function stopPropagation(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
export const Event = {
addHandler,
removeHandler,
getEvent,
getTarget,
preventDefault,
stopPropagation
}