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

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
“jonyshi” 2018-12-06 18:33:33 +08:00
parent 034d67da29 1eac3bea4f
commit 3c637d099f
15 changed files with 215 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@ -1,3 +1,18 @@
<a name="1.6.9"></a>
## [1.6.9](https://github.com/tinper-bee/bee-table/compare/v1.6.8...v1.6.9) (2018-12-05)
<a name="1.6.8"></a>
## [1.6.8](https://github.com/tinper-bee/bee-table/compare/v1.6.7...v1.6.8) (2018-12-05)
<a name="1.6.7"></a>
## [1.6.7](https://github.com/tinper-bee/bee-table/compare/v1.6.6...v1.6.7) (2018-12-04)
<a name="1.6.6"></a> <a name="1.6.6"></a>
## [1.6.6](https://github.com/tinper-bee/bee-table/compare/v1.6.5...v1.6.6) (2018-12-04) ## [1.6.6](https://github.com/tinper-bee/bee-table/compare/v1.6.5...v1.6.6) (2018-12-04)
@ -124,7 +139,7 @@
<a name="1.5.1"></a> <a name="1.5.1"></a>
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18) ## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)

34
build/FilterDropDown.js
View File

@ -59,15 +59,25 @@ var FilterDropDown = function (_Component) {
_this.onSelectDropdown = function (item) { _this.onSelectDropdown = function (item) {
var _this$props = _this.props, var _this$props = _this.props,
onSelectDropdown = _this$props.onSelectDropdown, onSelectDropdown = _this$props.onSelectDropdown,
dataText = _this$props.dataText; dataText = _this$props.dataText,
filterDropdownType = _this$props.filterDropdownType;
if (onSelectDropdown) { if (onSelectDropdown) {
if (dataText != "") { if (dataText != "") {
_this.setState({ if (filterDropdownType == 'string') {
selectValue: [item.key] _this.setState({
}, function () { selectValue: [item.key]
onSelectDropdown(item); }, function () {
}); onSelectDropdown(item);
});
}
if (filterDropdownType == 'number') {
_this.setState({
selectNumberValue: [item.key]
}, function () {
onSelectDropdown(item);
});
}
} }
} }
}; };
@ -77,7 +87,8 @@ var FilterDropDown = function (_Component) {
if (onClickClear) { if (onClickClear) {
_this.setState({ _this.setState({
selectValue: [] selectValue: [],
selectNumberValue: []
}, function () { }, function () {
onClickClear(); onClickClear();
}); });
@ -85,7 +96,9 @@ var FilterDropDown = function (_Component) {
}; };
_this.getMenu = function () { _this.getMenu = function () {
var selectValue = _this.state.selectValue; var _this$state = _this.state,
selectValue = _this$state.selectValue,
selectNumberValue = _this$state.selectNumberValue;
var filterDropdownType = _this.props.filterDropdownType; var filterDropdownType = _this.props.filterDropdownType;
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () { var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
@ -135,7 +148,7 @@ var FilterDropDown = function (_Component) {
_beeMenus2["default"], _beeMenus2["default"],
{ {
onSelect: _this.onSelectDropdown, onSelect: _this.onSelectDropdown,
selectedKeys: selectValue selectedKeys: selectNumberValue
}, },
_react2["default"].createElement( _react2["default"].createElement(
Item, Item,
@ -174,7 +187,8 @@ var FilterDropDown = function (_Component) {
}; };
_this.state = { _this.state = {
selectValue: [] //选择的条件的值 selectValue: ['LIKE'],
selectNumberValue: ['EQ']
}; };
return _this; return _this;
} }

6
build/FilterType.js
View File

@ -392,7 +392,11 @@ var FilterType = function (_Component) {
FilterType.prototype.render = function render() { FilterType.prototype.render = function render() {
var rendertype = this.props.rendertype; var rendertype = this.props.rendertype;
return this.renderControl(rendertype); return _react2["default"].createElement(
'div',
{ 'data-filter-type': 'filterContext' },
this.renderControl(rendertype)
);
}; };
return FilterType; return FilterType;

6
build/Table.css
View File

@ -434,7 +434,7 @@
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fff; } background: #fff; }
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
visibility: hidden; display: none;
pointer-events: none; } pointer-events: none; }
.u-table.bordered table { .u-table.bordered table {
@ -613,3 +613,7 @@
height: 32px; height: 32px;
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }

42
build/Table.js
View File

@ -679,8 +679,11 @@ var Table = function (_Component) {
}; };
Table.prototype.getColGroup = function getColGroup(columns, fixed) { Table.prototype.getColGroup = function getColGroup(columns, fixed) {
var _this3 = this;
var cols = []; var cols = [];
var self = this; var self = this;
var _state2 = this.state, var _state2 = this.state,
_state2$contentWidthD = _state2.contentWidthDiff, _state2$contentWidthD = _state2.contentWidthDiff,
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD, contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
@ -704,6 +707,7 @@ var Table = function (_Component) {
leafColumns = this.columnManager.leafColumns(); leafColumns = this.columnManager.leafColumns();
} }
cols = cols.concat(leafColumns.map(function (c, i, arr) { cols = cols.concat(leafColumns.map(function (c, i, arr) {
var fixedClass = '';
var width = c.width; var width = c.width;
if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) { if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
width = parseInt(self.contentWidth * parseInt(width) / 100); width = parseInt(self.contentWidth * parseInt(width) / 100);
@ -713,8 +717,10 @@ var Table = function (_Component) {
if (lastShowIndex == i && width) { if (lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
if (!fixed && c.fixed) {
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width } }); fixedClass = _this3.props.clsPrefix + '-row-fixed-columns-in-body';
}
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
})); }));
return _react2["default"].createElement( return _react2["default"].createElement(
'colgroup', 'colgroup',
@ -738,7 +744,7 @@ var Table = function (_Component) {
}; };
Table.prototype.getTable = function getTable() { Table.prototype.getTable = function getTable() {
var _this3 = this; var _this4 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var columns = options.columns, var columns = options.columns,
@ -760,6 +766,10 @@ var Table = function (_Component) {
//表格元素的宽度大于容器的宽度也显示滚动条 //表格元素的宽度大于容器的宽度也显示滚动条
if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) { if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
tableClassName = clsPrefix + '-fixed'; tableClassName = clsPrefix + '-fixed';
//没有数据并且含有顶部菜单时
if (this.props.data.length == 0 && this.props.headerScroll) {
bodyStyle.overflowX = 'hidden';
}
if (!footerScroll) { if (!footerScroll) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
} }
@ -823,24 +833,24 @@ var Table = function (_Component) {
if (scroll.x === true) { if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'; tableStyle.tableLayout = 'fixed';
} else { } else {
tableStyle.width = _this3.contentWidth; tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth() - _this4.columnManager.getRightColumnsWidth();
} }
} }
// 自动出现滚动条 // 自动出现滚动条
if (!fixed && _this3.contentDomWidth < _this3.contentWidth) { if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
tableStyle.width = _this3.contentWidth; tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth() - _this4.columnManager.getRightColumnsWidth();
} }
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement( var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
'tbody', 'tbody',
{ className: clsPrefix + '-tbody' }, { className: clsPrefix + '-tbody' },
_this3.getRows(columns, fixed) _this4.getRows(columns, fixed)
)) : null; )) : null;
var _drag_class = _this3.props.dragborder ? "table-drag-bordered" : ""; var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
return _react2["default"].createElement( return _react2["default"].createElement(
'table', 'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this3.getColGroup(columns, fixed), _this4.getColGroup(columns, fixed),
hasHead ? _this3.getHeader(columns, fixed) : null, hasHead ? _this4.getHeader(columns, fixed) : null,
tableBody tableBody
); );
}; };
@ -1003,10 +1013,10 @@ var Table = function (_Component) {
}; };
Table.prototype.findExpandedRow = function findExpandedRow(record, index) { Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
var _this4 = this; var _this5 = this;
var rows = this.getExpandedRows().filter(function (i) { var rows = this.getExpandedRows().filter(function (i) {
return i === _this4.getRowKey(record, index); return i === _this5.getRowKey(record, index);
}); });
return rows[0]; return rows[0];
}; };
@ -1077,7 +1087,7 @@ var Table = function (_Component) {
}; };
Table.prototype.render = function render() { Table.prototype.render = function render() {
var _this5 = this; var _this6 = this;
var props = this.props; var props = this.props;
var clsPrefix = props.clsPrefix; var clsPrefix = props.clsPrefix;
@ -1101,10 +1111,12 @@ var Table = function (_Component) {
show: loading show: loading
}; };
} }
var leftFixedWidth = this.columnManager.getLeftColumnsWidth();
var rightFixedWidth = this.columnManager.getRightColumnsWidth();
return _react2["default"].createElement( return _react2["default"].createElement(
'div', 'div',
{ className: className, style: props.style, ref: function ref(el) { { className: className, style: props.style, ref: function ref(el) {
return _this5.contentTable = el; return _this6.contentTable = el;
} }, } },
this.getTitle(), this.getTitle(),
_react2["default"].createElement( _react2["default"].createElement(
@ -1112,7 +1124,7 @@ var Table = function (_Component) {
{ className: clsPrefix + '-content' }, { className: clsPrefix + '-content' },
_react2["default"].createElement( _react2["default"].createElement(
'div', 'div',
{ className: isTableScroll ? clsPrefix + '-scroll' : '' }, { className: isTableScroll ? clsPrefix + '-scroll' : '', style: { 'marginLeft': leftFixedWidth } },
this.getTable({ columns: this.columnManager.groupedColumns() }), this.getTable({ columns: this.columnManager.groupedColumns() }),
this.getEmptyText(), this.getEmptyText(),
this.getFooter() this.getFooter()

22
build/TableHeader.js
View File

@ -127,10 +127,7 @@ var TableHeader = function (_Component) {
}; };
_this.onLineMouseUp = function (event) { _this.onLineMouseUp = function (event) {
var rows = _this.props.rows;
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
_this.clearDragBorder(event); _this.clearDragBorder(event);
}; };
@ -139,9 +136,11 @@ var TableHeader = function (_Component) {
}; };
_this.dragAbleMouseDown = function (e) { _this.dragAbleMouseDown = function (e) {
_utils.Event.stopPropagation(e); // Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return; if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果 event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble'; _this.drag.option = 'dragAble';
_this.currentDome = event.target; _this.currentDome = event.target;
@ -166,7 +165,6 @@ var TableHeader = function (_Component) {
if (_this.drag.option === 'border') { if (_this.drag.option === 'border') {
return; return;
} }
console.log(_this.drag.option + ' -------onDragStart----------', event.target);
var th = _this.getThDome(event.target); var th = _this.getThDome(event.target);
if (!th) return; if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index")); var currentIndex = parseInt(th.getAttribute("data-line-index"));
@ -190,7 +188,6 @@ var TableHeader = function (_Component) {
_this.currentDome.setAttribute('draggable', false); //添加交换列效果 _this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e); var data = _this.getCurrentEventData(e);
if (!data) return; if (!data) return;
console.log(_this.drag.option + ' -------onDrop----------', event.target);
if (!_this.currentObj || _this.currentObj.key == data.key) return; if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return; if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data }); _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
@ -446,7 +443,11 @@ var TableHeader = function (_Component) {
TableHeader.prototype.clearDragBorder = function clearDragBorder() { TableHeader.prototype.clearDragBorder = function clearDragBorder() {
// if (!this.props.dragborder || !this.props.draggable) return; // if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag) return; if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = { this.drag = {
option: "" option: ""
}; };
@ -519,6 +520,7 @@ var TableHeader = function (_Component) {
TableHeader.prototype.getThDome = function getThDome(element) { TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase(); var _tagName = element.tagName.toLowerCase();
if (element.getAttribute('data-filter-type') === 'filterContext') return null;
if (_tagName === 'i') return null; if (_tagName === 'i') return null;
if (_tagName != 'th') { if (_tagName != 'th') {
return this.getThDome(element.parentElement); return this.getThDome(element.parentElement);
@ -581,7 +583,7 @@ var TableHeader = function (_Component) {
delete da.drgHover; delete da.drgHover;
var fixedStyle = ""; var fixedStyle = "";
var canDotDrag = ""; var canDotDrag = "";
if (!fixed && da.fixed) { if (!fixed && (da.fixed || rows[0][columIndex].fixed)) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body"; fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
} }
@ -594,14 +596,14 @@ var TableHeader = function (_Component) {
} }
var thDefaultObj = {}; var thDefaultObj = {};
var thClassName = "" + da.className; var thClassName = "" + da.className ? "" + da.className : '';
if (draggable) { if (draggable) {
thClassName += clsPrefix + "-thead th-drag " + thHover + " "; thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
} }
if (dragborder) { if (dragborder) {
thClassName += clsPrefix + "-thead-th " + canDotDrag; thClassName += clsPrefix + "-thead-th " + canDotDrag;
} }
thClassName += "" + fixedStyle; thClassName += " " + fixedStyle;
if (!da.fixed) { if (!da.fixed) {
return _react2["default"].createElement( return _react2["default"].createElement(
"th", "th",

4
demo/TableDemo.scss
View File

@ -31,7 +31,5 @@
.u-table-filter-column-filter-icon{ .u-table-filter-column-filter-icon{
right: 15px; right: 15px;
} }
.u-table-scroll .u-table-header{
margin-right: 15px;
}
} }

8
dist/demo.css vendored
View File

@ -8696,7 +8696,7 @@ ul {
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fff; } background: #fff; }
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
visibility: hidden; display: none;
pointer-events: none; } pointer-events: none; }
.u-table.bordered table { .u-table.bordered table {
@ -8876,6 +8876,10 @@ ul {
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* FormGroup */ /* FormGroup */
@ -10306,8 +10310,6 @@ li.rc-time-picker-panel-select-option-disabled:hover {
height: 100%; } height: 100%; }
.demo25 .u-table-filter-column-filter-icon { .demo25 .u-table-filter-column-filter-icon {
right: 15px; } right: 15px; }
.demo25 .u-table-scroll .u-table-header {
margin-right: 15px; }
th .drop-menu .uf { th .drop-menu .uf {
font-size: 12px; font-size: 12px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

113
dist/demo.js vendored
View File

@ -11247,8 +11247,11 @@
}; };
Table.prototype.getColGroup = function getColGroup(columns, fixed) { Table.prototype.getColGroup = function getColGroup(columns, fixed) {
var _this3 = this;
var cols = []; var cols = [];
var self = this; var self = this;
var _state2 = this.state, var _state2 = this.state,
_state2$contentWidthD = _state2.contentWidthDiff, _state2$contentWidthD = _state2.contentWidthDiff,
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD, contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
@ -11272,6 +11275,7 @@
leafColumns = this.columnManager.leafColumns(); leafColumns = this.columnManager.leafColumns();
} }
cols = cols.concat(leafColumns.map(function (c, i, arr) { cols = cols.concat(leafColumns.map(function (c, i, arr) {
var fixedClass = '';
var width = c.width; var width = c.width;
if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) { if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
width = parseInt(self.contentWidth * parseInt(width) / 100); width = parseInt(self.contentWidth * parseInt(width) / 100);
@ -11281,8 +11285,10 @@
if (lastShowIndex == i && width) { if (lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
if (!fixed && c.fixed) {
return _react2['default'].createElement('col', { key: c.key, style: { width: width, minWidth: c.width } }); fixedClass = _this3.props.clsPrefix + '-row-fixed-columns-in-body';
}
return _react2['default'].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
})); }));
return _react2['default'].createElement( return _react2['default'].createElement(
'colgroup', 'colgroup',
@ -11306,7 +11312,7 @@
}; };
Table.prototype.getTable = function getTable() { Table.prototype.getTable = function getTable() {
var _this3 = this; var _this4 = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var columns = options.columns, var columns = options.columns,
@ -11328,6 +11334,10 @@
//表格元素的宽度大于容器的宽度也显示滚动条 //表格元素的宽度大于容器的宽度也显示滚动条
if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) { if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
tableClassName = clsPrefix + '-fixed'; tableClassName = clsPrefix + '-fixed';
//没有数据并且含有顶部菜单时
if (this.props.data.length == 0 && this.props.headerScroll) {
bodyStyle.overflowX = 'hidden';
}
if (!footerScroll) { if (!footerScroll) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
} }
@ -11391,24 +11401,24 @@
if (scroll.x === true) { if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'; tableStyle.tableLayout = 'fixed';
} else { } else {
tableStyle.width = _this3.contentWidth; tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth() - _this4.columnManager.getRightColumnsWidth();
} }
} }
// 自动出现滚动条 // 自动出现滚动条
if (!fixed && _this3.contentDomWidth < _this3.contentWidth) { if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
tableStyle.width = _this3.contentWidth; tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth() - _this4.columnManager.getRightColumnsWidth();
} }
var tableBody = hasBody ? getBodyWrapper(_react2['default'].createElement( var tableBody = hasBody ? getBodyWrapper(_react2['default'].createElement(
'tbody', 'tbody',
{ className: clsPrefix + '-tbody' }, { className: clsPrefix + '-tbody' },
_this3.getRows(columns, fixed) _this4.getRows(columns, fixed)
)) : null; )) : null;
var _drag_class = _this3.props.dragborder ? "table-drag-bordered" : ""; var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
return _react2['default'].createElement( return _react2['default'].createElement(
'table', 'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this3.getColGroup(columns, fixed), _this4.getColGroup(columns, fixed),
hasHead ? _this3.getHeader(columns, fixed) : null, hasHead ? _this4.getHeader(columns, fixed) : null,
tableBody tableBody
); );
}; };
@ -11472,10 +11482,15 @@
) )
); );
} }
var leftFixedWidth = this.columnManager.getLeftColumnsWidth();
var rightFixedWidth = this.columnManager.getRightColumnsWidth();
var parStyle = {};
if (!fixed) {
parStyle = { 'marginLeft': leftFixedWidth, 'marginRight': rightFixedWidth };
}
return _react2['default'].createElement( return _react2['default'].createElement(
'span', 'div',
null, { style: parStyle },
headTable, headTable,
BodyTable BodyTable
); );
@ -11571,10 +11586,10 @@
}; };
Table.prototype.findExpandedRow = function findExpandedRow(record, index) { Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
var _this4 = this; var _this5 = this;
var rows = this.getExpandedRows().filter(function (i) { var rows = this.getExpandedRows().filter(function (i) {
return i === _this4.getRowKey(record, index); return i === _this5.getRowKey(record, index);
}); });
return rows[0]; return rows[0];
}; };
@ -11645,7 +11660,7 @@
}; };
Table.prototype.render = function render() { Table.prototype.render = function render() {
var _this5 = this; var _this6 = this;
var props = this.props; var props = this.props;
var clsPrefix = props.clsPrefix; var clsPrefix = props.clsPrefix;
@ -11669,10 +11684,12 @@
show: loading show: loading
}; };
} }
var leftFixedWidth = this.columnManager.getLeftColumnsWidth();
var rightFixedWidth = this.columnManager.getRightColumnsWidth();
return _react2['default'].createElement( return _react2['default'].createElement(
'div', 'div',
{ className: className, style: props.style, ref: function ref(el) { { className: className, style: props.style, ref: function ref(el) {
return _this5.contentTable = el; return _this6.contentTable = el;
} }, } },
this.getTitle(), this.getTitle(),
_react2['default'].createElement( _react2['default'].createElement(
@ -12690,10 +12707,7 @@
}; };
_this.onLineMouseUp = function (event) { _this.onLineMouseUp = function (event) {
var rows = _this.props.rows;
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
_this.clearDragBorder(event); _this.clearDragBorder(event);
}; };
@ -12702,9 +12716,11 @@
}; };
_this.dragAbleMouseDown = function (e) { _this.dragAbleMouseDown = function (e) {
_utils.Event.stopPropagation(e); // Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
if (!_this.props.draggable) return; if (!_this.props.draggable) return;
var th = _this.getThDome(event.target);
if (!th) return;
event.target.setAttribute('draggable', true); //添加交换列效果 event.target.setAttribute('draggable', true); //添加交换列效果
_this.drag.option = 'dragAble'; _this.drag.option = 'dragAble';
_this.currentDome = event.target; _this.currentDome = event.target;
@ -12729,7 +12745,6 @@
if (_this.drag.option === 'border') { if (_this.drag.option === 'border') {
return; return;
} }
console.log(_this.drag.option + ' -------onDragStart----------', event.target);
var th = _this.getThDome(event.target); var th = _this.getThDome(event.target);
if (!th) return; if (!th) return;
var currentIndex = parseInt(th.getAttribute("data-line-index")); var currentIndex = parseInt(th.getAttribute("data-line-index"));
@ -12753,7 +12768,6 @@
_this.currentDome.setAttribute('draggable', false); //添加交换列效果 _this.currentDome.setAttribute('draggable', false); //添加交换列效果
var data = _this.getCurrentEventData(e); var data = _this.getCurrentEventData(e);
if (!data) return; if (!data) return;
console.log(_this.drag.option + ' -------onDrop----------', event.target);
if (!_this.currentObj || _this.currentObj.key == data.key) return; if (!_this.currentObj || _this.currentObj.key == data.key) return;
if (!_this.props.onDrop) return; if (!_this.props.onDrop) return;
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data }); _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
@ -13009,7 +13023,11 @@
TableHeader.prototype.clearDragBorder = function clearDragBorder() { TableHeader.prototype.clearDragBorder = function clearDragBorder() {
// if (!this.props.dragborder || !this.props.draggable) return; // if (!this.props.dragborder || !this.props.draggable) return;
if (!this.drag) return; if (!this.drag || !this.drag.option) return;
var rows = this.props.rows;
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = { this.drag = {
option: "" option: ""
}; };
@ -13082,6 +13100,7 @@
TableHeader.prototype.getThDome = function getThDome(element) { TableHeader.prototype.getThDome = function getThDome(element) {
var _tagName = element.tagName.toLowerCase(); var _tagName = element.tagName.toLowerCase();
if (element.getAttribute('data-filter-type') === 'filterContext') return null;
if (_tagName === 'i') return null; if (_tagName === 'i') return null;
if (_tagName != 'th') { if (_tagName != 'th') {
return this.getThDome(element.parentElement); return this.getThDome(element.parentElement);
@ -13144,7 +13163,7 @@
delete da.drgHover; delete da.drgHover;
var fixedStyle = ""; var fixedStyle = "";
var canDotDrag = ""; var canDotDrag = "";
if (!fixed && da.fixed) { if (!fixed && (da.fixed || rows[0][columIndex].fixed)) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body"; fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
} }
@ -13157,14 +13176,14 @@
} }
var thDefaultObj = {}; var thDefaultObj = {};
var thClassName = "" + da.className; var thClassName = "" + da.className ? "" + da.className : '';
if (draggable) { if (draggable) {
thClassName += clsPrefix + "-thead th-drag " + thHover + " "; thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
} }
if (dragborder) { if (dragborder) {
thClassName += clsPrefix + "-thead-th " + canDotDrag; thClassName += clsPrefix + "-thead-th " + canDotDrag;
} }
thClassName += "" + fixedStyle; thClassName += " " + fixedStyle;
if (!da.fixed) { if (!da.fixed) {
return _react2["default"].createElement( return _react2["default"].createElement(
"th", "th",
@ -14433,7 +14452,11 @@
FilterType.prototype.render = function render() { FilterType.prototype.render = function render() {
var rendertype = this.props.rendertype; var rendertype = this.props.rendertype;
return this.renderControl(rendertype); return _react2['default'].createElement(
'div',
{ 'data-filter-type': 'filterContext' },
this.renderControl(rendertype)
);
}; };
return FilterType; return FilterType;
@ -51712,15 +51735,25 @@
_this.onSelectDropdown = function (item) { _this.onSelectDropdown = function (item) {
var _this$props = _this.props, var _this$props = _this.props,
onSelectDropdown = _this$props.onSelectDropdown, onSelectDropdown = _this$props.onSelectDropdown,
dataText = _this$props.dataText; dataText = _this$props.dataText,
filterDropdownType = _this$props.filterDropdownType;
if (onSelectDropdown) { if (onSelectDropdown) {
if (dataText != "") { if (dataText != "") {
_this.setState({ if (filterDropdownType == 'string') {
selectValue: [item.key] _this.setState({
}, function () { selectValue: [item.key]
onSelectDropdown(item); }, function () {
}); onSelectDropdown(item);
});
}
if (filterDropdownType == 'number') {
_this.setState({
selectNumberValue: [item.key]
}, function () {
onSelectDropdown(item);
});
}
} }
} }
}; };
@ -51730,7 +51763,8 @@
if (onClickClear) { if (onClickClear) {
_this.setState({ _this.setState({
selectValue: [] selectValue: [],
selectNumberValue: []
}, function () { }, function () {
onClickClear(); onClickClear();
}); });
@ -51738,7 +51772,9 @@
}; };
_this.getMenu = function () { _this.getMenu = function () {
var selectValue = _this.state.selectValue; var _this$state = _this.state,
selectValue = _this$state.selectValue,
selectNumberValue = _this$state.selectNumberValue;
var filterDropdownType = _this.props.filterDropdownType; var filterDropdownType = _this.props.filterDropdownType;
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () { var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
@ -51788,7 +51824,7 @@
_beeMenus2['default'], _beeMenus2['default'],
{ {
onSelect: _this.onSelectDropdown, onSelect: _this.onSelectDropdown,
selectedKeys: selectValue selectedKeys: selectNumberValue
}, },
_react2['default'].createElement( _react2['default'].createElement(
Item, Item,
@ -51827,7 +51863,8 @@
}; };
_this.state = { _this.state = {
selectValue: [] //选择的条件的值 selectValue: ['LIKE'],
selectNumberValue: ['EQ']
}; };
return _this; return _this;
} }

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

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

29
src/Table.js
View File

@ -582,6 +582,7 @@ class Table extends Component {
getColGroup(columns, fixed) { getColGroup(columns, fixed) {
let cols = []; let cols = [];
let self = this; let self = this;
let { contentWidthDiff = 0, lastShowIndex = 0 } = this.state; let { contentWidthDiff = 0, lastShowIndex = 0 } = this.state;
if (this.props.expandIconAsCell && fixed !== 'right') { if (this.props.expandIconAsCell && fixed !== 'right') {
cols.push( cols.push(
@ -602,6 +603,7 @@ class Table extends Component {
leafColumns = this.columnManager.leafColumns(); leafColumns = this.columnManager.leafColumns();
} }
cols = cols.concat(leafColumns.map((c, i, arr) => { cols = cols.concat(leafColumns.map((c, i, arr) => {
let fixedClass ='';
let width = c.width; let width = c.width;
if (typeof (width) == 'string' && width.indexOf('%') > -1 && self.contentWidth) { if (typeof (width) == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
width = parseInt(self.contentWidth * parseInt(width) / 100); width = parseInt(self.contentWidth * parseInt(width) / 100);
@ -611,8 +613,10 @@ class Table extends Component {
if (lastShowIndex == i && width) { if (lastShowIndex == i && width) {
width = width + contentWidthDiff; width = width + contentWidthDiff;
} }
if (!fixed && c.fixed) {
return <col key={c.key} style={{ width: width, minWidth: c.width }} />; fixedClass = `${this.props.clsPrefix}-row-fixed-columns-in-body`;
}
return <col key={c.key} style={{ width: width, minWidth: c.width }} className={fixedClass}/>;
})); }));
return <colgroup>{cols}</colgroup>; return <colgroup>{cols}</colgroup>;
} }
@ -657,6 +661,10 @@ class Table extends Component {
//表格元素的宽度大于容器的宽度也显示滚动条 //表格元素的宽度大于容器的宽度也显示滚动条
if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) { if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
tableClassName = `${clsPrefix}-fixed`; tableClassName = `${clsPrefix}-fixed`;
//没有数据并且含有顶部菜单时
if(this.props.data.length == 0 && this.props.headerScroll ){
bodyStyle.overflowX = 'hidden';
}
if (!footerScroll) { if (!footerScroll) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
} }
@ -719,12 +727,12 @@ class Table extends Component {
if (scroll.x === true) { if (scroll.x === true) {
tableStyle.tableLayout = 'fixed'; tableStyle.tableLayout = 'fixed';
} else { } else {
tableStyle.width = this.contentWidth; tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
} }
} }
// 自动出现滚动条 // 自动出现滚动条
if ( !fixed && this.contentDomWidth < this.contentWidth) { if ( !fixed && this.contentDomWidth < this.contentWidth) {
tableStyle.width = this.contentWidth; tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
} }
const tableBody = hasBody ? getBodyWrapper( const tableBody = hasBody ? getBodyWrapper(
<tbody className={`${clsPrefix}-tbody`}> <tbody className={`${clsPrefix}-tbody`}>
@ -799,8 +807,13 @@ class Table extends Component {
</div> </div>
); );
} }
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
return <span>{headTable}{BodyTable}</span>; const rightFixedWidth = this.columnManager.getRightColumnsWidth();
let parStyle = {}
if(!fixed){
parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
}
return <div style={parStyle}>{headTable}{BodyTable}</div>;
} }
getTitle() { getTitle() {
@ -973,12 +986,14 @@ class Table extends Component {
show: loading, show: loading,
}; };
} }
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
const rightFixedWidth = this.columnManager.getRightColumnsWidth();
return ( return (
<div className={className} style={props.style} ref={el => this.contentTable = el}> <div className={className} style={props.style} ref={el => this.contentTable = el}>
{this.getTitle()} {this.getTitle()}
<div className={`${clsPrefix}-content`}> <div className={`${clsPrefix}-content`}>
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''}> <div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
{this.getTable({ columns: this.columnManager.groupedColumns() })} {this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()} {this.getEmptyText()}
{this.getFooter()} {this.getFooter()}

14
src/Table.scss
View File

@ -13,7 +13,7 @@ $table-border-color: #e9e9e9;
$table-hover-color: unquote("rgb(#{$palette-blue-50})") !default; $table-hover-color: unquote("rgb(#{$palette-blue-50})") !default;
$table-move-in-color: $bg-color-base; $table-move-in-color: $bg-color-base;
$checkbox-height:16px;
.u-table { .u-table {
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color; color: $text-color;
@ -463,7 +463,8 @@ $table-move-in-color: $bg-color-base;
} }
//拖拽宽度代码 //拖拽宽度代码
&-row-fixed-columns-in-body{ &-row-fixed-columns-in-body{
visibility: hidden; // visibility: hidden;
display:none;
pointer-events: none; pointer-events: none;
} }
} }
@ -703,3 +704,12 @@ $table-move-in-color: $bg-color-base;
} }
} }
} }
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}
.u-checkbox .u-checkbox-label:after,.u-checkbox .u-checkbox-label::before {
}

17
src/TableHeader.js
View File

@ -210,9 +210,7 @@ class TableHeader extends Component {
}; };
onLineMouseUp = (event) => { onLineMouseUp = (event) => {
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.clearDragBorder(event); this.clearDragBorder(event);
}; };
bodyonLineMouseMove = (event) => { bodyonLineMouseMove = (event) => {
@ -221,7 +219,10 @@ class TableHeader extends Component {
clearDragBorder(){ clearDragBorder(){
// if (!this.props.dragborder || !this.props.draggable) return; // if (!this.props.dragborder || !this.props.draggable) return;
if(!this.drag)return; if(!this.drag || !this.drag.option)return;
let {rows} = this.props;
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
this.drag = { this.drag = {
option:"" option:""
}; };
@ -283,7 +284,6 @@ class TableHeader extends Component {
let event = Event.getEvent(e); let event = Event.getEvent(e);
if (!this.props.draggable) return; if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;} if(this.drag.option === 'border'){return;}
// console.log(this.drag.option+' -------onDragStart----------',event.target);
let th = this.getThDome(event.target); let th = this.getThDome(event.target);
if(!th)return; if(!th)return;
let currentIndex = parseInt(th.getAttribute("data-line-index")); let currentIndex = parseInt(th.getAttribute("data-line-index"));
@ -320,7 +320,6 @@ class TableHeader extends Component {
this.currentDome.setAttribute('draggable',false);//添加交换列效果 this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(e); let data = this.getCurrentEventData(e);
if(!data)return; if(!data)return;
// console.log(this.drag.option+' -------onDrop----------',event.target);
if (!this.currentObj || this.currentObj.key == data.key) return; if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return; if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data}); this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
@ -524,7 +523,7 @@ class TableHeader extends Component {
delete da.drgHover; delete da.drgHover;
let fixedStyle = ""; let fixedStyle = "";
let canDotDrag = ""; let canDotDrag = "";
if (!fixed && da.fixed) { if (!fixed && (da.fixed || rows[0][columIndex].fixed) ) {
fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`; fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
} }
@ -541,14 +540,14 @@ class TableHeader extends Component {
} }
let thDefaultObj = {}; let thDefaultObj = {};
let thClassName = `${da.className}`; let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){ if(draggable){
thClassName += `${clsPrefix}-thead th-drag ${thHover} `; thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
} }
if(dragborder){ if(dragborder){
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`; thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
} }
thClassName += `${fixedStyle}`; thClassName += ` ${fixedStyle}`;
if(!da.fixed){ if(!da.fixed){
return (<th key={'table-header-th-'+da.dataindex} className={thClassName} data-th-fixed={da.fixed} return (<th key={'table-header-th-'+da.dataindex} className={thClassName} data-th-fixed={da.fixed}
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} > data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >