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

6
build/FilterType.js
View File

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

6
build/Table.css
View File

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

22
build/TableHeader.js
View File

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

4
demo/TableDemo.scss
View File

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

29
src/Table.js
View File

@ -582,6 +582,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(
@ -602,6 +603,7 @@ class Table extends Component {
leafColumns = this.columnManager.leafColumns();
}
cols = cols.concat(leafColumns.map((c, i, arr) => {
let fixedClass ='';
let width = c.width;
if (typeof (width) == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
width = parseInt(self.contentWidth * parseInt(width) / 100);
@ -611,8 +613,10 @@ class Table extends Component {
if (lastShowIndex == i && width) {
width = width + contentWidthDiff;
}
return <col key={c.key} style={{ width: width, minWidth: c.width }} />;
if (!fixed && c.fixed) {
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>;
}
@ -657,6 +661,10 @@ class Table extends Component {
//表格元素的宽度大于容器的宽度也显示滚动条
if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
tableClassName = `${clsPrefix}-fixed`;
//没有数据并且含有顶部菜单时
if(this.props.data.length == 0 && this.props.headerScroll ){
bodyStyle.overflowX = 'hidden';
}
if (!footerScroll) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
}
@ -719,12 +727,12 @@ class Table extends Component {
if (scroll.x === true) {
tableStyle.tableLayout = 'fixed';
} else {
tableStyle.width = this.contentWidth;
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
}
}
// 自动出现滚动条
if ( !fixed && this.contentDomWidth < this.contentWidth) {
tableStyle.width = this.contentWidth;
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
}
const tableBody = hasBody ? getBodyWrapper(
<tbody className={`${clsPrefix}-tbody`}>
@ -799,8 +807,13 @@ class Table extends Component {
</div>
);
}
return <span>{headTable}{BodyTable}</span>;
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
const rightFixedWidth = this.columnManager.getRightColumnsWidth();
let parStyle = {}
if(!fixed){
parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
}
return <div style={parStyle}>{headTable}{BodyTable}</div>;
}
getTitle() {
@ -973,12 +986,14 @@ class Table extends Component {
show: loading,
};
}
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
const rightFixedWidth = this.columnManager.getRightColumnsWidth();
return (
<div className={className} style={props.style} ref={el => this.contentTable = el}>
{this.getTitle()}
<div className={`${clsPrefix}-content`}>
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''}>
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
{this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()}
{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-move-in-color: $bg-color-base;
$checkbox-height:16px;
.u-table {
font-size: $font-size-base;
color: $text-color;
@ -463,7 +463,8 @@ $table-move-in-color: $bg-color-base;
}
//拖拽宽度代码
&-row-fixed-columns-in-body{
visibility: hidden;
// visibility: hidden;
display:none;
pointer-events: none;
}
}
@ -702,4 +703,13 @@ $table-move-in-color: $bg-color-base;
cursor: pointer;
}
}
}
//固定列含有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) => {
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);
};
bodyonLineMouseMove = (event) => {
@ -221,7 +219,10 @@ class TableHeader extends Component {
clearDragBorder(){
// 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 = {
option:""
};
@ -283,7 +284,6 @@ class TableHeader extends Component {
let event = Event.getEvent(e);
if (!this.props.draggable) return;
if(this.drag.option === 'border'){return;}
// console.log(this.drag.option+' -------onDragStart----------',event.target);
let th = this.getThDome(event.target);
if(!th)return;
let currentIndex = parseInt(th.getAttribute("data-line-index"));
@ -320,7 +320,6 @@ class TableHeader extends Component {
this.currentDome.setAttribute('draggable',false);//添加交换列效果
let data = this.getCurrentEventData(e);
if(!data)return;
// console.log(this.drag.option+' -------onDrop----------',event.target);
if (!this.currentObj || this.currentObj.key == data.key) return;
if(!this.props.onDrop)return;
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
@ -524,7 +523,7 @@ class TableHeader extends Component {
delete da.drgHover;
let fixedStyle = "";
let canDotDrag = "";
if (!fixed && da.fixed) {
if (!fixed && (da.fixed || rows[0][columIndex].fixed) ) {
fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
}
@ -541,14 +540,14 @@ class TableHeader extends Component {
}
let thDefaultObj = {};
let thClassName = `${da.className}`;
let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
}
if(dragborder){
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
}
thClassName += `${fixedStyle}`;
thClassName += ` ${fixedStyle}`;
if(!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} >