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

解决了th.setAttribute('draggable', true)报th为undefinded的问题

This commit is contained in:
cw 2019-08-09 10:59:06 +08:00
parent 01855fa7c4
commit e65f4cec38
5 changed files with 192 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/Table.css
View File

@ -438,8 +438,8 @@
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }

12
build/TableHeader.js
View File

@ -106,9 +106,9 @@ var TableHeader = function (_Component) {
_this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
}
} else if (type != 'online' && _this.props.draggable) {
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this.props.draggable) return;
var th = _this.getTargetToTh(targetEvent);
var th = _this.getTargetToType(targetEvent);
th.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble';
_this.currentDome = th;
@ -184,7 +184,7 @@ var TableHeader = function (_Component) {
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
if (newDiff > 0) {
//缩小
//缩小
var lastWidth = _this.lastColumWidth + newDiff;
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
@ -698,7 +698,7 @@ var TableHeader = function (_Component) {
if (!this.props.draggable) return;
var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
{ key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
{ key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
{ key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
{ key: 'dragenter', fun: this.onDragEnter }, { key: 'dragend', fun: this.onDragEnd }, { key: 'dragleave', fun: this.onDragLeave }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
@ -767,7 +767,7 @@ var TableHeader = function (_Component) {
}
};
//---拖拽列交换----end-----
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
@ -832,7 +832,7 @@ var TableHeader = function (_Component) {
// if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.key || da.dataindex || index + '-' + columIndex;
// }
// }
if (filterable && index == rows.length - 1) {
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
if (da.key === undefined) {

222
build/lib/dragColumn.js
View File

@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@ -35,126 +35,126 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
function dragColumn(Table) {
return function (_Component) {
_inherits(DragColumn, _Component);
return function (_Component) {
_inherits(DragColumn, _Component);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
_this.onDrop = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
_this.onDrop = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
var sourceIndex = -1,
targetIndex = -1;
var sourceIndex = -1,
targetIndex = -1;
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
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;
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
columns = _props.columns,
onDragStart = _props.onDragStart,
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
}));
};
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
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;
});
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
columns = _props.columns,
onDragStart = _props.onDragStart,
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
}));
};
return DragColumn;
}(_react.Component);
return DragColumn;
}(_react.Component);
}
module.exports = exports['default'];

80
build/lib/util.js
View File

@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
*/
function sortBy(arr, prop, desc) {
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
} else {
throw '参数类型错误';
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
if (desc) ret.reverse();
return ret;
} else {
throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
};
/**
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
* @param {} property
*/
function compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
}
/**
@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
}

66
src/TableHeader.js
View File

@ -22,7 +22,7 @@ function getDiv(id){
class TableHeader extends Component {
constructor(props) {
super(props);
this.currentObj = null;
this.currentObj = null;
this.theadKey = new Date().getTime();
this.drag = {
option:''
@ -88,7 +88,7 @@ class TableHeader extends Component {
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
this.table = table;
if(!this.props.dragborder)return;
@ -97,7 +97,7 @@ class TableHeader extends Component {
let _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
let siblingDom = _fixedParentContext.parentNode.nextElementSibling;
if (siblingDom) {
let fixedTable = siblingDom.querySelector("table");
let fixedTable = siblingDom.querySelector("table");
this.fixedTable.table = fixedTable
this.fixedTable.cols = fixedTable.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
@ -193,7 +193,7 @@ class TableHeader extends Component {
* @memberof TableHeader
*/
onTrMouseDown = (e) => {
Event.stopPropagation(e);
Event.stopPropagation(e);
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable,lastShowIndex } = this.props;
@ -223,9 +223,9 @@ class TableHeader extends Component {
this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
}
}else if(type != 'online' && this.props.draggable){
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
let th = this.getTargetToTh(targetEvent);
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
let th = this.getTargetToType(targetEvent);
th.setAttribute('draggable',true);//添加交换列效果
this.drag.option = 'dragAble';
this.currentDome = th;
@ -236,7 +236,7 @@ class TableHeader extends Component {
return ;
}
};
getTableWidth = ()=>{
let tableWidth = 0,offWidth = 0;//this.table.cols.length;
for (let index = 0; index < this.table.cols.length; index++) {
@ -245,7 +245,7 @@ class TableHeader extends Component {
}
return (tableWidth-offWidth);
}
/**
* 根据当前节点查找到有data-type类型的容器返回。
* @memberof TableHeader
@ -258,7 +258,7 @@ class TableHeader extends Component {
return tag;
}
/**
* 判断当前的target 是否是 th，如果不是，直接递归查找。
* @memberof TableHeader
@ -278,12 +278,12 @@ class TableHeader extends Component {
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
// if(newWidth > this.drag.minWidth){
@ -298,11 +298,11 @@ class TableHeader extends Component {
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
if(newDiff > 0){//缩小
if(newDiff > 0){//缩小
let lastWidth = this.lastColumWidth + newDiff;
this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
@ -354,14 +354,14 @@ class TableHeader extends Component {
* @memberof TableHeader
*/
onTrMouseUp = (e) => {
let event = Event.getEvent(e);
let event = Event.getEvent(e);
let width = this.drag.newWidth;
this.mouseClear();
this.props.onDropBorder && this.props.onDropBorder(event,width);
};
mouseClear(){
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};
@ -410,7 +410,7 @@ class TableHeader extends Component {
// overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y);
}
}
}
@ -423,9 +423,9 @@ class TableHeader extends Component {
let events = [
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
{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},
{key:'dragend', fun:this.onDragEnd},
{key:'dragleave', fun:this.onDragLeave},
];
@ -440,7 +440,7 @@ class TableHeader extends Component {
{key:'dragstart',fun:this.onDragStart},
{key:'dragover', fun:this.onDragOver},
{key:'drop', fun:this.onDrop},
{key:'dragenter', fun:this.onDragEnter},
{key:'dragenter', fun:this.onDragEnter},
{key:'dragend', fun:this.onDragEnd},
{key:'dragleave', fun:this.onDragLeave},
];
@ -452,7 +452,7 @@ class TableHeader extends Component {
*/
onDragStart = (e) => {
if (!this.props.draggable) return;
if(this.drag && this.drag.option != 'dragAble'){return;}
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
// target = Event.getTarget(event);
target = this.getTargetToTh(Event.getTarget(event));
@ -512,7 +512,7 @@ class TableHeader extends Component {
this._dragCurrent.setAttribute("style","");
// this._dragCurrent.style = "";
document.getElementById(this._table_none_cont_id).innerHTML = "";
let data = this.getCurrentEventData(this._dragCurrent);
if(!data)return;
if (!this.currentObj || this.currentObj.key == data.key) return;
@ -531,9 +531,9 @@ class TableHeader extends Component {
// this._dragCurrent.style = "";
}
}
/**
* 获取当前th上的对象数据
* @param {*} e
@ -572,8 +572,8 @@ class TableHeader extends Component {
}
}
//---拖拽列交换----end-----
//---拖拽列交换----end-----
/**
* 过滤输入后或下拉条件的回调函数
@ -710,7 +710,7 @@ class TableHeader extends Component {
};
render() {
render() {
const { clsPrefix, rowStyle,draggable,
dragborder, rows,filterable,fixed,lastShowIndex,
} = this.props;
@ -732,7 +732,7 @@ class TableHeader extends Component {
if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) {
fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`;
}
if (lastShowIndex == columIndex) {
canDotDrag = "th-can-not-drag";
}
@ -745,8 +745,8 @@ class TableHeader extends Component {
//避免key为undefined
// if(da.dataindex && da.key ===undefined ){
keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
// }
// }
if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType(
da["filtertype"],
@ -760,7 +760,7 @@ class TableHeader extends Component {
}
let thDefaultObj = {};
if(draggable){
thClassName += ` ${clsPrefix}-thead th-drag ${thHover} `;
}
@ -769,7 +769,7 @@ class TableHeader extends Component {
}
thClassName += ` ${fixedStyle}`;
if(!da.fixed ){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
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-type="draggable">
{da.children}
{