forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

解决switch拖拽，拖拽改成插入

This commit is contained in:
cw 2019-08-05 17:23:38 +08:00
parent 8e4d5b88e8
commit d067cce97b
11 changed files with 177424 additions and 172484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/Table.css
View File

@ -436,8 +436,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; }

11
build/Table.js
View File

@ -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);
}
// arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
};

12
build/TableRow.js
View File

@ -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";
@ -165,6 +165,10 @@ var TableRow = function (_Component) {
var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event),
target = _target.parentNode;
while (target.tagName != 'TR') {
target = target.parentNode;
}
_this.currentIndex = target.getAttribute("data-row-key");
onDragRowStart && onDragRowStart(_this.currentIndex);
@ -276,7 +280,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)';
}
};

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;
}

4
dist/demo.css vendored
View File

@ -428,8 +428,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; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

349425
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

84
src/Table.js
View File

@ -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()}

62
src/TableRow.js
View File

@ -80,7 +80,7 @@ class TableRow extends Component{
this.setRowParentIndex();
}
}
/**
* 事件初始化
*/
@ -92,7 +92,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 +110,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 +142,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 +157,7 @@ class TableRow extends Component{
let event = Event.getEvent(e);
event.preventDefault();
};
/**
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
* @memberof TableHeader
@ -167,13 +167,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);
@ -198,6 +198,10 @@ class TableRow extends Component{
let event = Event.getEvent(e) ,
_target = Event.getTarget(event),
target = _target.parentNode;
while (target.tagName != 'TR') {
target = target.parentNode
}
this.currentIndex = target.getAttribute("data-row-key");
onDragRowStart && onDragRowStart(this.currentIndex);
@ -228,12 +232,12 @@ class TableRow extends Component{
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 +246,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 +254,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 +269,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 +293,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 +315,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 +343,7 @@ class TableRow extends Component{
}
this.setRowHeight()
}
componentWillUnmount() {
const { record, onDestroy, index,rowDraggAble } = this.props;
onDestroy(record, index);
@ -362,7 +366,7 @@ class TableRow extends Component{
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
}
onRowClick(event) {
// fix: 解决 onRowClick 回调函数中，事件对象属性均为 null 的问题
// 异步访问事件属性
@ -381,7 +385,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 +415,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 +496,7 @@ class TableRow extends Component{
style.display = 'none';
}
return (
return (
<tr
draggable={rowDraggAble}
onClick={this.onRowClick}