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

fix: sync width

This commit is contained in:
gx 2021-04-02 16:08:29 +08:00
parent 929f501ff0
commit 7c9066da5b
6 changed files with 184 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
build/TableHeader.js
View File

@ -148,7 +148,7 @@ var TableHeader = function (_Component) {
table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.fixedRightHeaderTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer');
if (table.fixedLeftBodyTable) {
@ -163,6 +163,10 @@ var TableHeader = function (_Component) {
}
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
}
@ -774,12 +778,12 @@ var _initialiseProps = function _initialiseProps() {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this7.table.contentTableHeader.style.overflowX = 'scroll';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRightHeaderTable, scrollbarWidth);
} else {
//大于 0 不显示滚动条
_this7.table.contentTableHeader.style.overflowX = 'hidden';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
_this7.optTableMargin(_this7.table.fixedRightHeaderTable, 0);
}
} else {
var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
@ -803,7 +807,7 @@ var _initialiseProps = function _initialiseProps() {
}
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
// debugger
_this7.syncFixedBodyTableWidth(); // 同步body中table的宽度
var contentTablePar = _this7.table.contentTableHeader.parentNode;
// left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
// diff<0 往里拖，
@ -846,6 +850,21 @@ var _initialiseProps = function _initialiseProps() {
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
};
this.syncFixedBodyTableWidth = function () {
var _table = _this7.table,
fixedLeftHeaderTableBody = _table.fixedLeftHeaderTableBody,
fixedLeftInnerTableBody = _table.fixedLeftInnerTableBody,
fixedRightHeaderTableBody = _table.fixedRightHeaderTableBody,
fixedRightInnerTableBody = _table.fixedRightInnerTableBody;
if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px';
}
if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px';
}
};
this.onTrMouseUp = function (e) {
var event = _utils.Event.getEvent(e);
var width = _this7.drag.newWidth;

200
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,115 +35,115 @@ 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.onDragEnd = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
_this.onDragEnd = 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);
});
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
if (_this.props.onDragEnd) {
_this.props.onDragEnd(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;
});
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
if (_this.props.onDragEnd) {
_this.props.onDragEnd(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,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
_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',
onDragEnd: this.onDragEnd,
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,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragEnd: this.onDragEnd,
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;
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.3.15-beta.18",
"version": "2.3.15-beta.19",
"description": "Table ui component for react",
"keywords": [
"react",

22
src/TableHeader.js
View File

@ -106,7 +106,7 @@ class TableHeader extends Component {
table.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.fixedRightHeaderTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer') ;
if (table.fixedLeftBodyTable) {
@ -121,6 +121,10 @@ class TableHeader extends Component {
}
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
}
@ -420,11 +424,11 @@ class TableHeader extends Component {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
this.optTableMargin( this.table.fixedRightHeaderTable,scrollbarWidth);
}else{ //大于 0 不显示滚动条
this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
this.optTableMargin( this.table.fixedRighHeadertTable,0);
this.optTableMargin( this.table.fixedRightHeaderTable,0);
}
}else{
const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
@ -448,7 +452,7 @@ class TableHeader extends Component {
}
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
// debugger
this.syncFixedBodyTableWidth() // 同步body中table的宽度
const contentTablePar = this.table.contentTableHeader.parentNode;
// left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
// diff<0 往里拖，
@ -492,6 +496,16 @@ class TableHeader extends Component {
this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);
}
syncFixedBodyTableWidth = () => {
let { fixedLeftHeaderTableBody, fixedLeftInnerTableBody, fixedRightHeaderTableBody, fixedRightInnerTableBody } = this.table
if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px'
}
if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px'
}
}
/**
* 调整列宽的up事件
* @memberof TableHeader