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

fix：表格交换列后，再拖拽列宽，作用元素不对

This commit is contained in:
yangchch6 2019-12-25 14:53:03 +08:00
parent 7b515fb57d
commit d9ed1c7ffd
8 changed files with 99 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
build/ColumnManager.js
View File

@ -35,21 +35,7 @@ var ColumnManager = function () {
_initialiseProps.call(this);
//判断是否使用行拖拽
if (rowDraggAble) {
var dragHandleColumn = [{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
// fixed:"left",
width: 49,
render: function render() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
}
}];
columns = dragHandleColumn.concat(columns);
}
columns = this.addDragHandleColumn(columns, rowDraggAble);
columns = this.addOrderColumn(columns, showRowNum);
columns = this.deleteColumnNotShow(columns);
this.columns = columns || this.normalize(elements);
@ -57,6 +43,9 @@ var ColumnManager = function () {
this.originWidth = originWidth;
}
// 向数据列中添加一列:行拖拽标识
// delete the column which does not show
@ -341,6 +330,24 @@ var ColumnManager = function () {
var _initialiseProps = function _initialiseProps() {
this._cached = {};
this.addDragHandleColumn = function (columns, rowDraggAble) {
if (!rowDraggAble) {
return columns;
}
var dragHandleColumn = [{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
width: 49,
render: function render() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
}
}];
columns = dragHandleColumn.concat(columns);
return columns;
};
this.deleteColumnNotShow = function (columns) {
var len = columns.length;
for (var i = 0; i < len; i++) {

28
build/Table.js
View File

@ -201,20 +201,6 @@ var Table = function (_Component) {
_this.contentTable.appendChild(div);
};
_this.getColumnsChildrenList = function (columns) {
var expandIconAsCell = _this.props.expandIconAsCell;
if (expandIconAsCell) {
_this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
columns.forEach(function (da) {
da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
});
};
_this.onDragRowStart = function (currentKey) {
var data = _this.state.data,
currentIndex = void 0,
@ -327,9 +313,6 @@ var Table = function (_Component) {
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
}
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
_this.getColumnsChildrenList(props.columns); //复杂表头、所有叶子节点
_this.state = {
expandedRowKeys: expandedRowKeys,
data: props.data,
@ -371,6 +354,7 @@ var Table = function (_Component) {
_this.contentTable = null;
_this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
return _this;
}
@ -600,9 +584,6 @@ var Table = function (_Component) {
return this.props.expandedRowKeys || this.state.expandedRowKeys;
};
//todo 后续改进
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var lastShowIndex = this.state.lastShowIndex;
var _props = this.props,
@ -633,6 +614,7 @@ var Table = function (_Component) {
onDropBorder = _props.onDropBorder,
onDraggingBorder = _props.onDraggingBorder;
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -642,6 +624,10 @@ var Table = function (_Component) {
rowSpan: rows.length,
width: expandIconCellWidth
});
this.columnsChildrenList.unshift({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
@ -724,6 +710,8 @@ var Table = function (_Component) {
}
if (column.children) {
_this2.getHeaderRows(column.children, currentRow + 1, rows);
} else {
_this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
}
if ('colSpan' in column) {
cell.colSpan = column.colSpan;

7
build/TableHeader.js
View File

@ -552,7 +552,6 @@ var _initialiseProps = function _initialiseProps() {
if (type == 'online' && _this7.props.dragborder) {
if (!_this7.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width");
_this7.drag.option = "border"; //拖拽操作
@ -560,11 +559,11 @@ var _initialiseProps = function _initialiseProps() {
var columnKey = currentElement.getAttribute("data-line-key");
if (columnKey) {
currentIndex = columnsChildrenList.findIndex(function (da) {
return da.key.toLowerCase() === columnKey.toLowerCase();
return (da.key && da.key.toLowerCase()) === columnKey.toLowerCase();
});
}
}
console.log("currentIndex :", currentIndex);
// console.log("currentIndex :",currentIndex);
var currentObj = _this7.table.cols[currentIndex];
_this7.drag.currIndex = currentIndex;
_this7.drag.oldLeft = event.x;
@ -615,7 +614,7 @@ var _initialiseProps = function _initialiseProps() {
if (targetEvent.nodeName.toUpperCase() != "TH") {
th = _this7.getThDome(targetEvent);
}
console.log(" getTargetToTh: ", th);
// console.log(" getTargetToTh: ", th);
return th;
};

72
dist/demo.js vendored
View File

@ -37238,20 +37238,6 @@
_this.contentTable.appendChild(div);
};
_this.getColumnsChildrenList = function (columns) {
var expandIconAsCell = _this.props.expandIconAsCell;
if (expandIconAsCell) {
_this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
columns.forEach(function (da) {
da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
});
};
_this.onDragRowStart = function (currentKey) {
var data = _this.state.data,
currentIndex = void 0,
@ -37364,9 +37350,6 @@
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
}
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
_this.getColumnsChildrenList(props.columns); //复杂表头、所有叶子节点
_this.state = {
expandedRowKeys: expandedRowKeys,
data: props.data,
@ -37408,6 +37391,7 @@
_this.contentTable = null;
_this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
return _this;
}
@ -37637,9 +37621,6 @@
return this.props.expandedRowKeys || this.state.expandedRowKeys;
};
//todo 后续改进
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var lastShowIndex = this.state.lastShowIndex;
var _props = this.props,
@ -37670,6 +37651,7 @@
onDropBorder = _props.onDropBorder,
onDraggingBorder = _props.onDraggingBorder;
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -37679,6 +37661,10 @@
rowSpan: rows.length,
width: expandIconCellWidth
});
this.columnsChildrenList.unshift({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
@ -37761,6 +37747,8 @@
}
if (column.children) {
_this2.getHeaderRows(column.children, currentRow + 1, rows);
} else {
_this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
}
if ('colSpan' in column) {
cell.colSpan = column.colSpan;
@ -52182,7 +52170,6 @@
if (type == 'online' && _this7.props.dragborder) {
if (!_this7.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width");
_this7.drag.option = "border"; //拖拽操作
@ -52190,11 +52177,11 @@
var columnKey = currentElement.getAttribute("data-line-key");
if (columnKey) {
currentIndex = columnsChildrenList.findIndex(function (da) {
return da.key.toLowerCase() === columnKey.toLowerCase();
return (da.key && da.key.toLowerCase()) === columnKey.toLowerCase();
});
}
}
console.log("currentIndex :", currentIndex);
// console.log("currentIndex :",currentIndex);
var currentObj = _this7.table.cols[currentIndex];
_this7.drag.currIndex = currentIndex;
_this7.drag.oldLeft = event.x;
@ -52245,7 +52232,7 @@
if (targetEvent.nodeName.toUpperCase() != "TH") {
th = _this7.getThDome(targetEvent);
}
console.log(" getTargetToTh: ", th);
// console.log(" getTargetToTh: ", th);
return th;
};
@ -86255,21 +86242,7 @@
_initialiseProps.call(this);
//判断是否使用行拖拽
if (rowDraggAble) {
var dragHandleColumn = [{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
// fixed:"left",
width: 49,
render: function render() {
return _react2['default'].createElement(_beeIcon2['default'], { type: 'uf-navmenu' });
}
}];
columns = dragHandleColumn.concat(columns);
}
columns = this.addDragHandleColumn(columns, rowDraggAble);
columns = this.addOrderColumn(columns, showRowNum);
columns = this.deleteColumnNotShow(columns);
this.columns = columns || this.normalize(elements);
@ -86277,6 +86250,9 @@
this.originWidth = originWidth;
}
// 向数据列中添加一列:行拖拽标识
// delete the column which does not show
@ -86561,6 +86537,24 @@
var _initialiseProps = function _initialiseProps() {
this._cached = {};
this.addDragHandleColumn = function (columns, rowDraggAble) {
if (!rowDraggAble) {
return columns;
}
var dragHandleColumn = [{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
width: 49,
render: function render() {
return _react2['default'].createElement(_beeIcon2['default'], { type: 'uf-navmenu' });
}
}];
columns = dragHandleColumn.concat(columns);
return columns;
};
this.deleteColumnNotShow = function (columns) {
var len = columns.length;
for (var i = 0; i < len; i++) {

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

35
src/ColumnManager.js
View File

@ -8,21 +8,7 @@ export default class ColumnManager {
_cached = {}
constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
//判断是否使用行拖拽
if(rowDraggAble) {
let dragHandleColumn =[{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
// fixed:"left",
width: 49,
render: () => {
return <Icon type="uf-navmenu" />
}
}]
columns = dragHandleColumn.concat(columns);
}
columns = this.addDragHandleColumn(columns,rowDraggAble);
columns = this.addOrderColumn(columns,showRowNum);
columns = this.deleteColumnNotShow(columns);
this.columns = columns || this.normalize(elements);
@ -30,6 +16,25 @@ export default class ColumnManager {
this.originWidth = originWidth;
}
// 向数据列中添加一列:行拖拽标识
addDragHandleColumn = (columns, rowDraggAble) => {
if(!rowDraggAble){
return columns
}
let dragHandleColumn =[{
className: "drag-handle-column",
title: "",
key: "dragHandle",
dataIndex: "dragHandle",
width: 49,
render: () => {
return <Icon type="uf-navmenu" />
}
}]
columns = dragHandleColumn.concat(columns);
return columns;
}
// delete the column which does not show
deleteColumnNotShow = (columns) => {
let len = columns.length;

27
src/Table.js
View File

@ -127,9 +127,6 @@ class Table extends Component {
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
}
this.columnsChildrenList = [];//复杂表头、所有叶子节点
this.getColumnsChildrenList(props.columns);//复杂表头、所有叶子节点
this.state = {
expandedRowKeys,
data: props.data,
@ -171,6 +168,7 @@ class Table extends Component {
this.contentTable = null;
this.leftColumnsLength //左侧固定列的长度
this.centerColumnsLength //非固定列的长度
this.columnsChildrenList = [];//复杂表头、所有叶子节点
}
componentWillMount() {
this.centerColumnsLength = this.columnManager.centerColumns().length
@ -214,7 +212,7 @@ class Table extends Component {
this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
this.scrollTop = this.bodyTable.scrollTop;
}
}
} else if (nextProps.children !== this.props.children) {
this.columnManager.reset(null, nextProps.children,this.props.showRowNum); // 加入this.props.showRowNum参数
}
@ -426,24 +424,11 @@ class Table extends Component {
return this.props.expandedRowKeys || this.state.expandedRowKeys;
}
//todo 后续改进
getColumnsChildrenList = (columns)=>{
const { expandIconAsCell } = this.props;
if(expandIconAsCell){
this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
})
}
columns.forEach(da=>{
da.children?this.getColumnsChildrenList(da.children):this.columnsChildrenList.push(da);
})
}
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -453,6 +438,10 @@ class Table extends Component {
rowSpan: rows.length,
width: expandIconCellWidth
});
this.columnsChildrenList.unshift({
className: "u-table-expand-icon-column",
key: "expand-icon"
})
}
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
@ -530,6 +519,8 @@ class Table extends Component {
}
if (column.children) {
this.getHeaderRows(column.children, currentRow + 1, rows);
} else {
this.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
}
if ('colSpan' in column) {
cell.colSpan = column.colSpan;

7
src/TableHeader.js
View File

@ -225,17 +225,16 @@ class TableHeader extends Component {
if(type == 'online' && this.props.dragborder){
if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable',false);//添加交换列效果
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
let currentIndex = -1;
let defaultWidth = currentElement.getAttribute("data-th-width");
this.drag.option = "border";//拖拽操作
if(columnsChildrenList){
let columnKey = currentElement.getAttribute("data-line-key");
if(columnKey){
currentIndex = columnsChildrenList.findIndex(da=>da.key.toLowerCase() === columnKey.toLowerCase());
currentIndex = columnsChildrenList.findIndex(da=> (da.key && da.key.toLowerCase()) === columnKey.toLowerCase());
}
}
console.log("currentIndex :",currentIndex);
// console.log("currentIndex :",currentIndex);
let currentObj = this.table.cols[currentIndex];
this.drag.currIndex = currentIndex;
this.drag.oldLeft = event.x;
@ -294,7 +293,7 @@ class TableHeader extends Component {
if(targetEvent.nodeName.toUpperCase() != "TH"){
th = this.getThDome(targetEvent);
}
console.log(" getTargetToTh: ", th);
// console.log(" getTargetToTh: ", th);
return th;
}
/**