固定列在主table里面隐藏样式前增加空格

This commit is contained in:
wanghaoo 2018-12-20 09:41:51 +08:00
parent 12f4dbf798
commit f80234a509
13 changed files with 239 additions and 97 deletions

BIN
build.zip Normal file

Binary file not shown.

View File

@ -156,7 +156,6 @@
.u-table {
font-size: 12px;
color: #666;
transition: opacity 0.3s ease;
position: relative;
line-height: 1.5;
overflow: hidden; }
@ -174,20 +173,17 @@
border-collapse: collapse;
text-align: left; }
.u-table th {
font-weight: bold;
transition: background 0.3s ease; }
font-weight: bold; }
.u-table th[colspan] {
text-align: center; }
.u-table th ::last-child {
overflow: hidden; }
.u-table td {
border-bottom: 1px solid #e9e9e9; }
.u-table tr {
transition: all 0.3s ease; }
.u-table tr:hover {
background: rgb(227,242,253); }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr:hover {
background: rgb(227,242,253); }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr.tr-row-hover {
background: rgb(227,242,253); }
.u-table th,
@ -214,6 +210,8 @@
.u-table-header {
overflow: hidden;
background: #f7f7f7; }
.u-table.fixed-height td {
padding: 0px 8px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }

View File

@ -258,6 +258,11 @@ var Table = function (_Component) {
} else if (nextProps.children !== this.props.children) {
this.columnManager.reset(null, nextProps.children);
}
//适配lazyload
if (nextProps.scrollTop) {
this.refs.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop;
}
if (!nextProps.originWidth) {
this.computeTableWidth();
}
@ -597,7 +602,11 @@ var Table = function (_Component) {
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
if (props.lazyLoad && props.lazyLoad.preHeight) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true }));
}
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.currentIndex ? props.lazyLoad.currentIndex : 0;
var expandedContentHeight = 0;
for (var i = 0; i < data.length; i++) {
var record = data[i];
var key = this.getRowKey(record, i);
@ -606,6 +615,7 @@ var Table = function (_Component) {
var expandedRowContent = void 0;
if (expandedRowRender && isRowExpanded) {
expandedRowContent = expandedRowRender(record, i, indent);
expandedContentHeight = parseInt(expandedRowContent.props.style ? expandedRowContent.props.style.height : 0);
}
//只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon隐藏行展开的icon
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
@ -623,10 +633,10 @@ var Table = function (_Component) {
fixedIndex = this.treeRowIndex;
}
if (props.fixedHeight) {
height = props.fixedHeight;
} else {
height = fixed && fixedColumnsBodyRowsHeight[fixedIndex] ? fixedColumnsBodyRowsHeight[fixedIndex] : null;
if (props.height) {
height = props.height;
} else if (fixed) {
height = fixedColumnsBodyRowsHeight[fixedIndex];
}
var leafColumns = void 0;
@ -670,7 +680,10 @@ var Table = function (_Component) {
hoverKey: key,
ref: rowRef,
store: this.store,
fixed: fixed
fixed: fixed,
lazyCurrentIndex: lazyCurrentIndex,
expandedContentHeight: expandedContentHeight,
setRowHeight: props.setRowHeight
})));
this.treeRowIndex++;
var subVisible = visible && isRowExpanded;
@ -679,10 +692,14 @@ var Table = function (_Component) {
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
}
if (childrenColumn) {
this.treeType = true; //证明是tree表形式
this.treeType = true; //证明是tree表形式visible = {true}
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
}
}
if (props.lazyLoad && props.lazyLoad.sufHeight) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, columns: [], className: '', store: this.store, visible: true }));
}
return rst;
};
@ -732,7 +749,7 @@ var Table = function (_Component) {
width = width + contentWidthDiff;
}
if (!fixed && c.fixed) {
fixedClass = _this3.props.clsPrefix + '-row-fixed-columns-in-body';
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 });
}));
@ -1054,7 +1071,8 @@ var Table = function (_Component) {
var _props8 = this.props,
_props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix;
clsPrefix = _props8.clsPrefix,
handleScroll = _props8.handleScroll;
var _refs = this.refs,
headTable = _refs.headTable,
bodyTable = _refs.bodyTable,
@ -1084,7 +1102,8 @@ var Table = function (_Component) {
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
}
}
if (scroll.y) {
console.log('lastScrollTop--' + this.lastScrollTop + '--eventScrollTop--' + e.target.scrollTop);
if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
}
@ -1094,7 +1113,14 @@ var Table = function (_Component) {
if (bodyTable && e.target !== bodyTable) {
bodyTable.scrollTop = e.target.scrollTop;
}
this.lastScrollTop = e.target.scrollTop;
console.log('handleBodyScroll---scrollTop--' + e.target.scrollTop);
if (handleScroll) {
var scrollTop = e.target.scrollTop;
(0, _utils.debounce)(handleScroll(scrollTop), 200);
}
}
// Remember last scrollLeft for scroll direction detecting.
this.lastScrollLeft = e.target.scrollLeft;
};
@ -1127,7 +1153,10 @@ var Table = function (_Component) {
className += ' ' + clsPrefix + '-bordered';
}
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
//如果传入height说明是固定高度
if (props.height) {
className += ' fixed-height';
}
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
var loading = props.loading;
if (typeof loading === 'boolean') {
@ -1135,8 +1164,7 @@ 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) {

View File

@ -109,7 +109,7 @@ var TableCell = function (_Component) {
}
//不是固定表格并且当前列是固定,则隐藏当前列
if (column.fixed && !fixed) {
className = className + (clsPrefix + '-fixed-columns-in-body');
className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
}
return _react2["default"].createElement(
'td',

View File

@ -592,7 +592,7 @@ var TableHeader = function (_Component) {
var canDotDrag = "";
//主表格下、固定列或者是过滤行中含有固定列时添加该属性
if (!fixed && (da.fixed || filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
fixedStyle = " " + clsPrefix + "-row-fixed-columns-in-body";
}
if (lastShowIndex == columIndex) {

View File

@ -84,6 +84,10 @@ var TableRow = function (_Component) {
}
};
_this.bindElement = function (el) {
_this.element = el;
};
_this._timeout = null;
_this.state = {
hovered: false
@ -92,7 +96,7 @@ var TableRow = function (_Component) {
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
_this.expandHeight = 0;
return _this;
}
@ -110,6 +114,14 @@ var TableRow = function (_Component) {
_this2.setState({ hovered: false });
}
});
this.setRowHeight();
};
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
if (this.props.index !== prevProps.index) {
this.setRowHeight();
}
};
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
@ -124,15 +136,27 @@ var TableRow = function (_Component) {
}
};
TableRow.prototype.onRowClick = function onRowClick(event) {
TableRow.prototype.setRowHeight = function setRowHeight() {
var _props3 = this.props,
record = _props3.record,
index = _props3.index,
onRowClick = _props3.onRowClick,
expandable = _props3.expandable,
expandRowByClick = _props3.expandRowByClick,
expanded = _props3.expanded,
onExpand = _props3.onExpand;
setRowHeight = _props3.setRowHeight,
expandedContentHeight = _props3.expandedContentHeight,
_props3$lazyCurrentIn = _props3.lazyCurrentIndex,
lazyCurrentIndex = _props3$lazyCurrentIn === undefined ? 0 : _props3$lazyCurrentIn,
fixed = _props3.fixed;
if (!setRowHeight || !this.element || fixed) return;
setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index + lazyCurrentIndex);
};
TableRow.prototype.onRowClick = function onRowClick(event) {
var _props4 = this.props,
record = _props4.record,
index = _props4.index,
onRowClick = _props4.onRowClick,
expandable = _props4.expandable,
expandRowByClick = _props4.expandRowByClick,
expanded = _props4.expanded,
onExpand = _props4.onExpand;
if (expandable && expandRowByClick) {
onExpand(!expanded, record, index, event);
@ -143,50 +167,52 @@ var TableRow = function (_Component) {
};
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
var _props4 = this.props,
record = _props4.record,
index = _props4.index,
onRowDoubleClick = _props4.onRowDoubleClick;
var _props5 = this.props,
record = _props5.record,
index = _props5.index,
onRowDoubleClick = _props5.onRowDoubleClick;
this.clear();
onRowDoubleClick(record, index, event);
};
TableRow.prototype.onMouseEnter = function onMouseEnter() {
var _props5 = this.props,
onHover = _props5.onHover,
hoverKey = _props5.hoverKey;
var _props6 = this.props,
onHover = _props6.onHover,
hoverKey = _props6.hoverKey;
onHover(true, hoverKey);
};
TableRow.prototype.onMouseLeave = function onMouseLeave() {
var _props6 = this.props,
onHover = _props6.onHover,
hoverKey = _props6.hoverKey;
var _props7 = this.props,
onHover = _props7.onHover,
hoverKey = _props7.hoverKey;
onHover(false, hoverKey);
};
TableRow.prototype.render = function render() {
var _props7 = this.props,
clsPrefix = _props7.clsPrefix,
columns = _props7.columns,
record = _props7.record,
height = _props7.height,
visible = _props7.visible,
index = _props7.index,
expandIconColumnIndex = _props7.expandIconColumnIndex,
expandIconAsCell = _props7.expandIconAsCell,
expanded = _props7.expanded,
expandRowByClick = _props7.expandRowByClick,
expandable = _props7.expandable,
onExpand = _props7.onExpand,
needIndentSpaced = _props7.needIndentSpaced,
indent = _props7.indent,
indentSize = _props7.indentSize,
isHiddenExpandIcon = _props7.isHiddenExpandIcon,
fixed = _props7.fixed;
var _props8 = this.props,
clsPrefix = _props8.clsPrefix,
columns = _props8.columns,
record = _props8.record,
height = _props8.height,
visible = _props8.visible,
index = _props8.index,
expandIconColumnIndex = _props8.expandIconColumnIndex,
expandIconAsCell = _props8.expandIconAsCell,
expanded = _props8.expanded,
expandRowByClick = _props8.expandRowByClick,
expandable = _props8.expandable,
onExpand = _props8.onExpand,
needIndentSpaced = _props8.needIndentSpaced,
indent = _props8.indent,
indentSize = _props8.indentSize,
isHiddenExpandIcon = _props8.isHiddenExpandIcon,
fixed = _props8.fixed,
_props8$lazyCurrentIn = _props8.lazyCurrentIndex,
lazyCurrentIndex = _props8$lazyCurrentIn === undefined ? 0 : _props8$lazyCurrentIn;
var showSum = false;
var className = this.props.className;
@ -229,7 +255,7 @@ var TableRow = function (_Component) {
record: record,
indentSize: indentSize,
indent: indent,
index: index,
index: index + lazyCurrentIndex,
column: columns[i],
key: columns[i].key,
fixed: fixed,
@ -250,7 +276,8 @@ var TableRow = function (_Component) {
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
style: style
style: style,
ref: this.bindElement
},
cells
);

View File

@ -26,17 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
rowsInView: _propTypes2["default"].number.isRequired
};
var defaultProps = {
data: undefined,
height: 40, //默认行高
rowsInView: 25
};
var defaultHeight = 40;
function bigData(Table) {
return function (_Component) {
var _class, _temp, _initialiseProps;
return _temp = _class = function (_Component) {
_inherits(BigData, _Component);
function BigData(props) {
@ -44,21 +38,28 @@ function bigData(Table) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_initialiseProps.call(_this);
_this.state = {
currentIndex: 0,
scrollLeft: 0,
scrollTop: 0
};
var rowHeight = _this.props.height ? _this.props.height : defaultHeight;
//默认显示25条rowsInView根据定高算的。在非固定高下这个只是一个大概的值。
_this.rowsInView = _this.props.scroll.y ? Math.ceil(_this.props.scroll.y / rowHeight) : 25;
_this.cachedRowHeight = [];
_this.lastScrollTop = 0;
_this.setRowHeight = _this.setRowHeight.bind(_this);
return _this;
}
/**
*获取数据区高度
*
*
**/
*获取数据区高度
*
*
**/
BigData.prototype.getContentHeight = function getContentHeight() {
if (!this.props.data) return 0;
@ -66,24 +67,112 @@ function bigData(Table) {
};
BigData.prototype.getSumHeight = function getSumHeight(start, end) {
var rowHeight = this.props.rowHeight;
var height = this.props.height;
var height = 0;
var rowHeight = height ? height : defaultHeight;
var sumHeight = 0;
for (var i = start; i < end; i++) {
height += this.cachedRowHeight[i] || rowHeight;
sumHeight += this.cachedRowHeight[i] || rowHeight;
}
return height;
return sumHeight;
};
BigData.prototype.getData = function getData() {};
// getIndex(scrollTop = this.state.scrollTop) {
// const { data } = this.props
// const {rowsInView} = this;
// const max = data.length
// const mcf = scrollTop > 0.5 ? Math.ceil : Math.floor
// let index = mcf((scrollTop * max) - (rowsInView * scrollTop))
// if (index > max - rowsInView) index = max - rowsInView
// if (index < 0) index = 0
// return index
// }
// getLastRowHeight = (index) =>{
// const { height, data } = this.props
// const {rowsInView} = this;
// if (index + rowsInView >= data.length) return 0
// let lastRowHeight = 0
// if (index >= 1 && index < data.length / 2) {
// lastRowHeight = this.cachedRowHeight[index - 1] || height
// }
// return lastRowHeight
// }
BigData.prototype.setRowHeight = function setRowHeight(height, index) {
this.cachedRowHeight[index] = height;
};
BigData.prototype.render = function render() {
return _react2["default"].createElement(Table, _extends({}, this.props, { data: this.getData }));
var data = this.props.data;
var _state = this.state,
currentIndex = _state.currentIndex,
scrollTop = _state.scrollTop;
var rowsInView = this.rowsInView;
var lazyLoad = {
preHeight: this.getSumHeight(0, currentIndex),
sufHeight: this.getSumHeight(currentIndex + rowsInView, data.length),
currentIndex: currentIndex
};
return _react2["default"].createElement(Table, _extends({}, this.props, {
data: data.slice(currentIndex, currentIndex + rowsInView),
lazyLoad: lazyLoad,
handleScroll: this.handleScroll,
scrollTop: scrollTop,
setRowHeight: this.setRowHeight
// className={'lazy-table'}
}));
};
return BigData;
}(_react.Component);
BigData.defaultProps = defaultProps;
BigData.propTypes = propTypes;
}(_react.Component), _class.defaultProps = {
data: undefined
// height: 40, //默认行高
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.handleScroll = function (scrollTop) {
console.log('scrollTop----' + scrollTop);
var _props = _this2.props,
data = _props.data,
height = _props.height;
var rowHeight = height ? height : defaultHeight;
var rowsInView = _this2.rowsInView;
var _state$currentIndex = _this2.state.currentIndex,
currentIndex = _state$currentIndex === undefined ? 0 : _state$currentIndex;
// let index = currentIndex;
var index = 0;
// let temp = scrollTop - this.lastScrollTop;
var temp = scrollTop;
// let lastScrollTop = scrollTop;
while (temp > 0) {
temp -= _this2.cachedRowHeight[index] || rowHeight;
if (temp > 0) {
index += 1;
}
}
//记录上一次滚动的位置,作为缓存用
// this.lastScrollTop = lastScrollTop + temp;
// offset last row
// index -= 1
console.log(index);
if (data.length - rowsInView < index) index = data.length - rowsInView;
if (index < 0) index = 0;
if (currentIndex !== index) {
_this2.setState({ currentIndex: index, scrollTop: scrollTop });
}
};
}, _temp;
}
module.exports = exports["default"];

File diff suppressed because one or more lines are too long

10
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -647,7 +647,7 @@ class Table extends Component {
width = width + contentWidthDiff;
}
if (!fixed && c.fixed) {
fixedClass = `${this.props.clsPrefix}-row-fixed-columns-in-body`;
fixedClass = ` ${this.props.clsPrefix}-row-fixed-columns-in-body`;
}
return <col key={c.key} style={{ width: width, minWidth: c.width }} className={fixedClass}/>;
}));

View File

@ -66,7 +66,7 @@ class TableCell extends Component{
}
//不是固定表格并且当前列是固定,则隐藏当前列
if(column.fixed && !fixed){
className = className+`${clsPrefix}-fixed-columns-in-body`;
className = className+` ${clsPrefix}-fixed-columns-in-body`;
}
return (
<td

View File

@ -532,7 +532,7 @@ class TableHeader extends Component {
let canDotDrag = "";
//主表格下、固定列或者是过滤行中含有固定列时添加该属性
if (!fixed && (da.fixed || (filterable && index == rows.length - 1 && rows[0][columIndex].fixed)) ) {
fixedStyle = `${clsPrefix}-row-fixed-columns-in-body`;
fixedStyle = ` ${clsPrefix}-row-fixed-columns-in-body`;
}
if (lastShowIndex == columIndex) {