diff --git a/build/Table.css b/build/Table.css index 4afde28..8edd6d6 100644 --- a/build/Table.css +++ b/build/Table.css @@ -460,8 +460,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; } diff --git a/build/TableHeader.js b/build/TableHeader.js index 2c0ee04..4d6f907 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -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; diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js index ea9fc27..03bc53e 100644 --- a/build/lib/dragColumn.js +++ b/build/lib/dragColumn.js @@ -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']; \ No newline at end of file diff --git a/build/lib/util.js b/build/lib/util.js index 9ea2e19..237dba1 100644 --- a/build/lib/util.js +++ b/build/lib/util.js @@ -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; } \ No newline at end of file diff --git a/package.json b/package.json index 517a0b2..8b1d553 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/TableHeader.js b/src/TableHeader.js index 028a181..5be16fc 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -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