Merge branch 'solve-switch-problem'
This commit is contained in:
cw
commit
cb0dce7156
|
|
@ -42,7 +42,7 @@ var ColumnManager = function () {
|
|||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed: "left",
|
||||
// fixed:"left",
|
||||
width: 49,
|
||||
render: function render() {
|
||||
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
|
||||
|
|
|
|||
|
|
@ -209,6 +209,8 @@
|
|||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table td .u-switch-span {
|
||||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
|
|
@ -436,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; }
|
||||
|
|
|
|||
|
|
@ -230,7 +230,16 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
_this.swapArray = function (arr, index1, index2) {
|
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
var value1 = arr[index1];
|
||||
arr.splice(index1, 1);
|
||||
if (index1 < index2) {
|
||||
console.log('向下拖');
|
||||
arr.splice(index2, 0, value1);
|
||||
} else {
|
||||
console.log('向上拖');
|
||||
arr.splice(index2 + 1, 0, value1);
|
||||
}
|
||||
|
||||
return arr;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ var TableRow = function (_Component) {
|
|||
|
||||
{ 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: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, '', _this.element);
|
||||
};
|
||||
|
|
@ -102,7 +102,7 @@ var TableRow = function (_Component) {
|
|||
|
||||
{ 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: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, 'remove', _this.element);
|
||||
};
|
||||
|
|
@ -117,7 +117,7 @@ var TableRow = function (_Component) {
|
|||
_this._dragCurrent = target;
|
||||
|
||||
//TODO 自定义图像后续需要增加。
|
||||
// let crt = this.synchronizeTableTrShadow();
|
||||
// let crt = this.synchronizeTableTrShadow();
|
||||
// document.getElementById(this.props.tableUid).appendChild(crt);
|
||||
// event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
|
|
@ -160,17 +160,28 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onTouchStart = function (e) {
|
||||
e.stopPropagation();
|
||||
var onDragRowStart = _this.props.onDragRowStart;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
} else {
|
||||
|
||||
_this.canBeTouch = false;
|
||||
}
|
||||
};
|
||||
|
||||
_this.onTouchMove = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) return;
|
||||
e.stopPropagation();
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
var touchTarget = _this.getTouchDom(event),
|
||||
|
|
@ -187,6 +198,13 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onTouchEnd = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) {
|
||||
_this.canBeTouch = true;
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
|
@ -276,7 +294,7 @@ var TableRow = function (_Component) {
|
|||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -317,6 +335,7 @@ var TableRow = function (_Component) {
|
|||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
_this.cacheCurrentIndex = null;
|
||||
_this.canBeTouch = true; //受否允许拖动该行
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -8,11 +8,12 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Switch from 'bee-switch';
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "系统权限", dataIndex: "c", key: "c", width: 200,render:()=>{return(<Switch size="sm" />)}},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -194,6 +194,8 @@
|
|||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table td .u-switch-span {
|
||||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
|
|
@ -428,8 +430,8 @@
|
|||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
187
package.json
187
package.json
|
|
@ -1,96 +1,97 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.1.9",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
"name": "bee-table",
|
||||
"version": "2.2.0-alpha.0",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "1.1.2",
|
||||
"bee-locale": "0.0.14",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.14",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^3.0.2",
|
||||
"bee-switch": "^2.0.6",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "1.1.2",
|
||||
"bee-locale": "0.0.14",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.14",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^3.0.2",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default class ColumnManager {
|
|||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed:"left",
|
||||
width: 49,
|
||||
// fixed:"left",
|
||||
width: 49,
|
||||
render: () => {
|
||||
return <Icon type="uf-navmenu" />
|
||||
}
|
||||
|
|
@ -64,11 +64,11 @@ export default class ColumnManager {
|
|||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
centerColumns() {
|
||||
return this._cache('centerColumns', () => {
|
||||
return this.groupedColumns().filter(
|
||||
column => !column.fixed
|
||||
column => !column.fixed
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -235,7 +235,7 @@ export default class ColumnManager {
|
|||
//todo 含有children的宽度计算
|
||||
_leafColumns(columns) {
|
||||
const leafColumns = [];
|
||||
|
||||
|
||||
columns.forEach(column => {
|
||||
if (!column.children) {
|
||||
|
||||
|
|
|
|||
84
src/Table.js
84
src/Table.js
|
|
@ -214,7 +214,7 @@ class Table extends Component {
|
|||
this.scrollbarWidth = measureScrollbar();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
|
||||
}
|
||||
|
|
@ -238,7 +238,7 @@ class Table extends Component {
|
|||
if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
this.resetScrollX();
|
||||
}
|
||||
|
||||
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
}
|
||||
|
|
@ -272,7 +272,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
computeTableWidth() {
|
||||
|
||||
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
let setWidthParam = this.props.scroll.x
|
||||
|
||||
|
|
@ -285,7 +285,7 @@ class Table extends Component {
|
|||
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
|
||||
|
||||
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
|
||||
|
||||
|
||||
}
|
||||
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||||
let lastShowIndex = computeObj.lastShowIndex;
|
||||
|
|
@ -320,7 +320,7 @@ class Table extends Component {
|
|||
// const leftBodyTable = this.refs.fixedColumnsBodyLeft;
|
||||
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
|
||||
this.bodyTable.style.overflowY = overflowy;
|
||||
|
||||
|
||||
this.headTable.style.overflowY = overflowy;
|
||||
rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
|
||||
// 没有纵向滚动条时，表头横向滚动条根据内容动态显示 待验证
|
||||
|
|
@ -329,8 +329,8 @@ class Table extends Component {
|
|||
// rightBodyTable && (rightBodyTable.style.overflowX = 'auto');
|
||||
// leftBodyTable && (leftBodyTable.style.overflowX = 'auto');
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
onExpandedRowsChange(expandedRowKeys) {
|
||||
|
|
@ -386,7 +386,7 @@ class Table extends Component {
|
|||
);
|
||||
return key;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
getExpandedRows() {
|
||||
|
|
@ -561,7 +561,7 @@ class Table extends Component {
|
|||
indent={1}
|
||||
expandable={false}
|
||||
store={this.store}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
onDragRow={this.onDragRow}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
|
|
@ -575,7 +575,7 @@ class Table extends Component {
|
|||
*/
|
||||
onDragRowStart = (currentKey) => {
|
||||
let {data} = this.state,currentIndex,record;
|
||||
data.forEach((da,i)=>{
|
||||
data.forEach((da,i)=>{
|
||||
// tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
|
||||
let trKey = da.key ? da.key : this.getRowKey(da, i);
|
||||
if(trKey == currentKey){
|
||||
|
|
@ -617,7 +617,17 @@ class Table extends Component {
|
|||
* @param {number} index2 删除项目的位置
|
||||
*/
|
||||
swapArray = (arr, index1, index2) => {
|
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
var value1 = arr[index1]
|
||||
arr.splice(index1,1)
|
||||
if(index1<index2){
|
||||
console.log('向下拖')
|
||||
arr.splice(index2,0,value1)
|
||||
|
||||
}else {
|
||||
console.log('向上拖')
|
||||
arr.splice(index2+1,0,value1)
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
|
|
@ -681,13 +691,13 @@ class Table extends Component {
|
|||
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
|
||||
isHiddenExpandIcon = props.haveExpandIcon(record, i);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const onHoverProps = {};
|
||||
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (props.height) {
|
||||
height = props.height
|
||||
|
|
@ -709,7 +719,7 @@ class Table extends Component {
|
|||
if(i == data.length -1 && props.showSum){
|
||||
className = className + ' sumrow';
|
||||
}
|
||||
|
||||
|
||||
let paramRootIndex = rootIndex;
|
||||
//小于0说明为第一层节点，她的子孙节点要保存自己的根节点
|
||||
if(paramRootIndex<0){
|
||||
|
|
@ -801,7 +811,7 @@ class Table extends Component {
|
|||
getColGroup(columns, fixed) {
|
||||
let cols = [];
|
||||
let self = this;
|
||||
|
||||
|
||||
let { contentWidthDiff = 0, lastShowIndex = 0 } = this.state;
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(
|
||||
|
|
@ -909,7 +919,7 @@ class Table extends Component {
|
|||
//显示表头滚动条
|
||||
if(headerScroll){
|
||||
if(fixed){
|
||||
|
||||
|
||||
if(this.domWidthDiff <= 0){
|
||||
headStyle.marginBottom = `${scrollbarWidth}px`;
|
||||
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
|
||||
|
|
@ -931,7 +941,7 @@ class Table extends Component {
|
|||
}else{
|
||||
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
// 没有数据时，表头滚动条隐藏问题
|
||||
if(data.length == 0 && this.domWidthDiff < 0){
|
||||
|
|
@ -939,14 +949,14 @@ class Table extends Component {
|
|||
}else{
|
||||
headStyle.marginBottom = `-${scrollbarWidth}px`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(data.length == 0 && hideHeaderScroll){
|
||||
if(data.length == 0 && hideHeaderScroll){
|
||||
//支持 NCC 需求:表格无数据时，去掉表头滚动条 (https://github.com/iuap-design/tinper-bee/issues/207)
|
||||
headStyle.marginBottom = `-${this.scrollbarWidth}px`;
|
||||
}
|
||||
|
|
@ -1103,8 +1113,8 @@ class Table extends Component {
|
|||
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(
|
||||
headRows, row =>{
|
||||
let height = headerHeight;
|
||||
headRows, row =>{
|
||||
let height = headerHeight;
|
||||
if(headerHeight){
|
||||
height = (getMaxColChildrenLength(columns)+1)*headerHeight;
|
||||
}
|
||||
|
|
@ -1128,11 +1138,11 @@ class Table extends Component {
|
|||
return row.getBoundingClientRect().height || 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
|
||||
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
|
||||
return;
|
||||
|
|
@ -1172,10 +1182,10 @@ class Table extends Component {
|
|||
|
||||
hideHoverDom(e){
|
||||
if(this.hoverDom){
|
||||
this.hoverDom.style.display = 'none';
|
||||
this.hoverDom.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
handleBodyScroll(e) {
|
||||
const headTable = this.headTable;
|
||||
|
|
@ -1233,9 +1243,9 @@ class Table extends Component {
|
|||
handleScrollY(this.lastScrollTop,this.treeType),
|
||||
300)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
this.lastScrollLeft = e.target.scrollLeft;
|
||||
}
|
||||
|
|
@ -1259,7 +1269,7 @@ class Table extends Component {
|
|||
const scrollTop = this.lastScrollTop ?this.lastScrollTop:0
|
||||
let top = td.offsetTop - scrollTop;
|
||||
if(this.headTable){
|
||||
top = top + this.headTable.clientHeight;
|
||||
top = top + this.headTable.clientHeight;
|
||||
}
|
||||
this.hoverDom.style.top = top + 'px';
|
||||
this.hoverDom.style.height = td.offsetHeight + 'px';
|
||||
|
|
@ -1267,7 +1277,7 @@ class Table extends Component {
|
|||
this.hoverDom.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
onRowHover && onRowHover(currentIndex,record);
|
||||
|
|
@ -1280,7 +1290,7 @@ class Table extends Component {
|
|||
currentHoverKey: this.currentHoverKey,
|
||||
});
|
||||
this.hoverDom.style.display = 'block';
|
||||
|
||||
|
||||
}
|
||||
onRowHoverMouseLeave = () =>{
|
||||
|
||||
|
|
@ -1290,7 +1300,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
onKeyDown=(e)=>{
|
||||
let event = Event.getEvent(e);
|
||||
let event = Event.getEvent(e);
|
||||
// event.preventDefault?event.preventDefault():event.returnValue = false;
|
||||
if(event.keyCode === 38){//up
|
||||
event.preventDefault&&event.preventDefault();
|
||||
|
|
@ -1344,11 +1354,11 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
|
||||
{this.getTitle()}
|
||||
<div className={`${clsPrefix}-content`}>
|
||||
|
||||
|
||||
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
|
||||
{this.getTable({ columns: this.columnManager.groupedColumns() })}
|
||||
{this.getEmptyText()}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,9 @@ $icon-color:#505F79;
|
|||
color: #1565c0;
|
||||
}
|
||||
}
|
||||
.u-switch-span{
|
||||
display: inline-block
|
||||
}
|
||||
}
|
||||
thead{
|
||||
tr:last-child{
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ class TableRow extends Component{
|
|||
this.expandHeight = 0;
|
||||
this.event = false;
|
||||
this.cacheCurrentIndex = null;
|
||||
this.canBeTouch = true //受否允许拖动该行
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ class TableRow extends Component{
|
|||
this.setRowParentIndex();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
|
@ -92,7 +93,7 @@ class TableRow extends Component{
|
|||
|
||||
{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:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
|
|
@ -110,7 +111,7 @@ class TableRow extends Component{
|
|||
|
||||
{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:'dragleave', fun:this.onDragLeave},
|
||||
];
|
||||
|
|
@ -142,9 +143,9 @@ class TableRow extends Component{
|
|||
target = Event.getTarget(event);
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
this._dragCurrent = target;
|
||||
|
||||
|
||||
//TODO 自定义图像后续需要增加。
|
||||
// let crt = this.synchronizeTableTrShadow();
|
||||
// let crt = this.synchronizeTableTrShadow();
|
||||
// document.getElementById(this.props.tableUid).appendChild(crt);
|
||||
// event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
|
|
@ -157,7 +158,7 @@ class TableRow extends Component{
|
|||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
|
|
@ -167,13 +168,13 @@ class TableRow extends Component{
|
|||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
|
||||
let currentKey = event.dataTransfer.getData("text");
|
||||
let targetKey = target.getAttribute("data-row-key");
|
||||
|
||||
if(!targetKey || targetKey === currentKey)return;
|
||||
if(!targetKey || targetKey === currentKey)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentKey,null);
|
||||
this.synchronizeTableTr(currentKey,null);
|
||||
this.synchronizeTableTr(targetKey,null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
|
|
@ -194,16 +195,28 @@ class TableRow extends Component{
|
|||
* 开始调整交换行的事件
|
||||
*/
|
||||
onTouchStart = (e) => {
|
||||
e.stopPropagation()
|
||||
let {onDragRowStart} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
}else{
|
||||
|
||||
this.canBeTouch = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onTouchMove = (e) => {
|
||||
|
||||
if (!this.canBeTouch) return;
|
||||
e.stopPropagation()
|
||||
let event = Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
let touchTarget = this.getTouchDom(event),
|
||||
|
|
@ -222,18 +235,25 @@ class TableRow extends Component{
|
|||
* 手指移开时触发
|
||||
*/
|
||||
onTouchEnd = (e) => {
|
||||
|
||||
if(!this.canBeTouch){
|
||||
this.canBeTouch = true
|
||||
return
|
||||
}
|
||||
|
||||
e.stopPropagation()
|
||||
let {onDragRow} = this.props;
|
||||
let event = Event.getEvent(e),
|
||||
currentKey = this.currentIndex, //拖拽行的key
|
||||
touchTarget = this.getTouchDom(event), //当前触摸的DOM节点
|
||||
target = touchTarget.parentNode, //目标位置的行
|
||||
targetKey = target.getAttribute("data-row-key"); //目标位置的行key
|
||||
if(!targetKey || targetKey === currentKey)return;
|
||||
if(!targetKey || targetKey === currentKey)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentKey,null);
|
||||
this.synchronizeTableTr(targetKey,null);
|
||||
}
|
||||
|
||||
|
||||
onDragRow && onDragRow(currentKey,targetKey);
|
||||
}
|
||||
|
||||
|
|
@ -242,7 +262,7 @@ class TableRow extends Component{
|
|||
* @memberof TableRow
|
||||
*/
|
||||
synchronizeTableTrShadow = ()=>{
|
||||
let {contentTable,index} = this.props;
|
||||
let {contentTable,index} = this.props;
|
||||
|
||||
let cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
trs = cont.getBoundingClientRect(),
|
||||
|
|
@ -250,7 +270,7 @@ class TableRow extends Component{
|
|||
fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
|
||||
fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect()
|
||||
|
||||
|
||||
let div = document.createElement("div");
|
||||
let style = "wdith:"+(trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0))+"px";
|
||||
style += ";height:"+ trs.height+"px";
|
||||
|
|
@ -265,13 +285,13 @@ class TableRow extends Component{
|
|||
*/
|
||||
synchronizeTableTr = (currentIndex,type)=>{
|
||||
if(type){ //同步 this.cacheCurrentIndex
|
||||
this.cacheCurrentIndex = currentIndex;
|
||||
}
|
||||
let {contentTable} = this.props;
|
||||
this.cacheCurrentIndex = currentIndex;
|
||||
}
|
||||
let {contentTable} = this.props;
|
||||
let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
|
||||
_table_trs = _table_trs?_table_trs:contentTable.querySelector('.u-table table tbody');
|
||||
|
||||
this.synchronizeTrStyle(_table_trs,currentIndex,type);
|
||||
|
|
@ -289,7 +309,7 @@ class TableRow extends Component{
|
|||
synchronizeTrStyle = (_elementBody,id,type)=>{
|
||||
let {contentTable} = this.props,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj;
|
||||
currentObj;
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
const element = trs[index];
|
||||
if(element.getAttribute("data-row-key") == id){
|
||||
|
|
@ -311,16 +331,16 @@ class TableRow extends Component{
|
|||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onDragLeave = (e) => {
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
if(target.nodeName.toUpperCase() === "TR"){
|
||||
this.synchronizeTableTr(currentIndex,null);
|
||||
}
|
||||
}
|
||||
|
|
@ -339,7 +359,7 @@ class TableRow extends Component{
|
|||
}
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
||||
|
||||
componentWillUnmount() {
|
||||
const { record, onDestroy, index,rowDraggAble } = this.props;
|
||||
onDestroy(record, index);
|
||||
|
|
@ -362,7 +382,7 @@ class TableRow extends Component{
|
|||
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
||||
|
||||
}
|
||||
|
||||
|
||||
onRowClick(event) {
|
||||
// fix: 解决 onRowClick 回调函数中，事件对象属性均为 null 的问题
|
||||
// 异步访问事件属性
|
||||
|
|
@ -381,7 +401,7 @@ class TableRow extends Component{
|
|||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, fixedIndex,event);
|
||||
}
|
||||
this.set((e)=> {
|
||||
this.set((e)=> {
|
||||
onRowClick(record, fixedIndex, event);
|
||||
});
|
||||
}
|
||||
|
|
@ -411,19 +431,19 @@ class TableRow extends Component{
|
|||
|
||||
set =(fn)=> {
|
||||
this.clear();
|
||||
this._timeout = window.setTimeout(fn, 300);
|
||||
this._timeout = window.setTimeout(fn, 300);
|
||||
}
|
||||
|
||||
clear =(event)=> {
|
||||
if (this._timeout) {
|
||||
window.clearTimeout(this._timeout);
|
||||
if (this._timeout) {
|
||||
window.clearTimeout(this._timeout);
|
||||
}
|
||||
}
|
||||
|
||||
bindElement = (el)=> {
|
||||
this.element = el
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
|
|
@ -492,7 +512,7 @@ class TableRow extends Component{
|
|||
style.display = 'none';
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble}
|
||||
onClick={this.onRowClick}
|
||||
|
|
|
|||
Loading…
Reference in New Issue