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

固定列下滚动条不可以拖拽问题

This commit is contained in:
wanghaoo 2018-12-06 13:39:51 +08:00
parent 8b6e11ba9e
commit 92df6ea14b
9 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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; }

38
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,
@ -823,24 +829,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 +1009,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 +1083,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 +1107,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 +1120,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()

6
build/TableHeader.js
View File

@ -583,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";
}
@ -596,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
dist/demo.css vendored
View File

@ -8876,6 +8876,10 @@ ul {
padding: 0px 16px 0 16px;
cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }
/* FormGroup */
/* Navlayout */
/* FormGroup */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

6
dist/demo.js vendored
View File

@ -13154,7 +13154,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";
}
@ -13167,14 +13167,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",

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

11
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;
@ -692,4 +692,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 {
}

6
src/TableHeader.js
View File

@ -523,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`;
}
@ -540,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} >