判断树状表格bug
This commit is contained in:
wanghaoo
parent
222a55981e
commit
c99b78660e
|
|
@ -166,8 +166,7 @@
|
|||
.u-table-hiden-drag-li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 10px; }
|
||||
left: 0px; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -375,9 +374,7 @@
|
|||
zoom: 1;
|
||||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s; }
|
||||
color: #999; }
|
||||
.u-table-thead th:hover .bee-table-column-sorter {
|
||||
display: inline-block; }
|
||||
.u-table-thead .th-drag {
|
||||
|
|
|
|||
|
|
@ -140,6 +140,8 @@ var defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale: {},
|
||||
syncHover: true,
|
||||
setRowHeight: function setRowHeight() {},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0'
|
||||
};
|
||||
|
||||
|
|
@ -291,7 +293,10 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
this.firstDid = true; //避免重复update
|
||||
}
|
||||
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
};
|
||||
|
||||
Table.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
|
|
@ -300,8 +305,9 @@ var Table = function (_Component) {
|
|||
this.syncFixedTableRowHeight();
|
||||
}
|
||||
//适应模态框中表格、以及父容器宽度变化的情况
|
||||
if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth) {
|
||||
if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
|
||||
this.computeTableWidth();
|
||||
this.firstDid = false; //避免重复update
|
||||
}
|
||||
if (this.scrollTop) {
|
||||
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||
|
|
@ -607,8 +613,23 @@ var Table = function (_Component) {
|
|||
dragborderKey: this.props.dragborderKey
|
||||
});
|
||||
};
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {*} data
|
||||
* @param {*} visible
|
||||
* @param {*} indent 层级
|
||||
* @param {*} columns
|
||||
* @param {*} fixed
|
||||
* @param {number} [rootIndex=-1] 祖级节点
|
||||
* @returns
|
||||
* @memberof Table
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||||
|
||||
var props = this.props;
|
||||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
|
|
@ -629,11 +650,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) {
|
||||
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
||||
|
||||
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var record = data[i];
|
||||
var key = this.getRowKey(record, i);
|
||||
|
|
@ -643,7 +664,7 @@ var Table = function (_Component) {
|
|||
var expandedContentHeight = 0;
|
||||
if (expandedRowRender && isRowExpanded) {
|
||||
expandedRowContent = expandedRowRender(record, i, indent);
|
||||
expandedContentHeight = parseInt(expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
|
||||
expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
|
||||
}
|
||||
//只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
|
||||
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
|
||||
|
|
@ -655,6 +676,7 @@ var Table = function (_Component) {
|
|||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
}
|
||||
//fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
|
||||
var fixedIndex = i;
|
||||
//判断是否是tree结构
|
||||
if (this.treeType) {
|
||||
|
|
@ -681,6 +703,15 @@ var Table = function (_Component) {
|
|||
className = className + ' sumrow';
|
||||
}
|
||||
|
||||
var paramRootIndex = rootIndex;
|
||||
//小于0说明为第一层节点，她的子孙节点要保存自己的根节点
|
||||
if (paramRootIndex < 0) {
|
||||
paramRootIndex = i + lazyParentIndex;
|
||||
}
|
||||
var index = i;
|
||||
if (rootIndex == -1) {
|
||||
index = i + lazyParentIndex;
|
||||
}
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
|
|
@ -689,7 +720,7 @@ var Table = function (_Component) {
|
|||
record: record,
|
||||
expandIconAsCell: expandIconAsCell,
|
||||
onDestroy: this.onRowDestroy,
|
||||
index: fixedIndex + lazyCurrentIndex,
|
||||
index: index,
|
||||
visible: visible,
|
||||
expandRowByClick: expandRowByClick,
|
||||
onExpand: this.onExpanded,
|
||||
|
|
@ -709,9 +740,13 @@ var Table = function (_Component) {
|
|||
ref: rowRef,
|
||||
store: this.store,
|
||||
fixed: fixed,
|
||||
lazyCurrentIndex: lazyCurrentIndex,
|
||||
expandedContentHeight: expandedContentHeight,
|
||||
setRowHeight: props.setRowHeight
|
||||
setRowHeight: props.setRowHeight,
|
||||
setRowParentIndex: props.setRowParentIndex,
|
||||
treeType: childrenColumn || this.treeType ? true : false,
|
||||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||||
rootIndex: rootIndex
|
||||
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -721,11 +756,11 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (childrenColumn) {
|
||||
this.treeType = true; //证明是tree表形式visible = {true}
|
||||
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
|
||||
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
|
||||
}
|
||||
}
|
||||
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight) {
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
return rst;
|
||||
|
|
@ -1143,7 +1178,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
this.lastScrollTop = e.target.scrollTop;
|
||||
if (handleScroll) {
|
||||
(0, _utils.debounce)(handleScroll(this.lastScrollTop), 500);
|
||||
(0, _utils.debounce)(handleScroll(this.lastScrollTop, this.treeType), 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -623,7 +623,7 @@ var TableHeader = function (_Component) {
|
|||
rows.map(function (row, index) {
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@ var defaultProps = {
|
|||
expandRowByClick: false,
|
||||
onHover: function onHover() {},
|
||||
|
||||
className: ''
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -107,7 +108,8 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey;
|
||||
hoverKey = _props.hoverKey,
|
||||
treeType = _props.treeType;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
|
|
@ -118,10 +120,19 @@ var TableRow = function (_Component) {
|
|||
});
|
||||
|
||||
this.setRowHeight();
|
||||
if (treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
if (this.props.index !== prevProps.index) {
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
this.setRowHeight();
|
||||
// if(this.props.fixedIndex!== prevProps.fixedIndex){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
} else if (this.props.index !== prevProps.index) {
|
||||
this.setRowHeight();
|
||||
}
|
||||
};
|
||||
|
|
@ -143,23 +154,33 @@ var TableRow = function (_Component) {
|
|||
setRowHeight = _props3.setRowHeight,
|
||||
_props3$expandedConte = _props3.expandedContentHeight,
|
||||
expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte,
|
||||
_props3$lazyCurrentIn = _props3.lazyCurrentIndex,
|
||||
lazyCurrentIndex = _props3$lazyCurrentIn === undefined ? 0 : _props3$lazyCurrentIn,
|
||||
fixed = _props3.fixed;
|
||||
fixed = _props3.fixed,
|
||||
fixedIndex = _props3.fixedIndex;
|
||||
|
||||
if (!setRowHeight || !this.element || fixed) return;
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index);
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
|
||||
var _props4 = this.props,
|
||||
index = _props4.index,
|
||||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
||||
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;
|
||||
var _props5 = this.props,
|
||||
record = _props5.record,
|
||||
index = _props5.index,
|
||||
onRowClick = _props5.onRowClick,
|
||||
expandable = _props5.expandable,
|
||||
expandRowByClick = _props5.expandRowByClick,
|
||||
expanded = _props5.expanded,
|
||||
onExpand = _props5.onExpand;
|
||||
|
||||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, index, event);
|
||||
|
|
@ -170,52 +191,50 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
|
||||
var _props5 = this.props,
|
||||
record = _props5.record,
|
||||
index = _props5.index,
|
||||
onRowDoubleClick = _props5.onRowDoubleClick;
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick;
|
||||
|
||||
this.clear();
|
||||
onRowDoubleClick(record, index, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter() {
|
||||
var _props6 = this.props,
|
||||
onHover = _props6.onHover,
|
||||
hoverKey = _props6.hoverKey;
|
||||
var _props7 = this.props,
|
||||
onHover = _props7.onHover,
|
||||
hoverKey = _props7.hoverKey;
|
||||
|
||||
onHover(true, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave() {
|
||||
var _props7 = this.props,
|
||||
onHover = _props7.onHover,
|
||||
hoverKey = _props7.hoverKey;
|
||||
var _props8 = this.props,
|
||||
onHover = _props8.onHover,
|
||||
hoverKey = _props8.hoverKey;
|
||||
|
||||
onHover(false, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
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 _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
columns = _props9.columns,
|
||||
record = _props9.record,
|
||||
height = _props9.height,
|
||||
visible = _props9.visible,
|
||||
index = _props9.index,
|
||||
expandIconColumnIndex = _props9.expandIconColumnIndex,
|
||||
expandIconAsCell = _props9.expandIconAsCell,
|
||||
expanded = _props9.expanded,
|
||||
expandRowByClick = _props9.expandRowByClick,
|
||||
expandable = _props9.expandable,
|
||||
onExpand = _props9.onExpand,
|
||||
needIndentSpaced = _props9.needIndentSpaced,
|
||||
indent = _props9.indent,
|
||||
indentSize = _props9.indentSize,
|
||||
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
|
||||
fixed = _props9.fixed;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -8,14 +8,16 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
|
||||
exports["default"] = bigData;
|
||||
|
||||
var _react = require('react');
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
var _propTypes = require("prop-types");
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -28,7 +30,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
|
||||
var defaultHeight = 40;
|
||||
var rowDiff = 3; //行差值
|
||||
|
||||
var treeTypeIndex = 0;
|
||||
function bigData(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
|
|
@ -53,13 +55,94 @@ function bigData(Table) {
|
|||
_this2.currentIndex = 0;
|
||||
_this2.loadCount = props.loadBuffer ? _this2.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
_this2.cachedRowHeight = []; //缓存每行的高度
|
||||
_this2.cachedRowParentIndex = [];
|
||||
_this2.expandChildRowKeys = [];
|
||||
_this2.firstLevelKey = [];
|
||||
_this2.keys = [];
|
||||
_this2.lastScrollTop = 0;
|
||||
_this2.currentScrollTop = 0;
|
||||
_this2.startIndex = _this2.currentIndex; //数据开始位置
|
||||
_this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
|
||||
_this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
|
||||
_this2.setRowHeight = _this2.setRowHeight.bind(_this2);
|
||||
_this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2);
|
||||
return _this2;
|
||||
}
|
||||
|
||||
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.scroll.y !== this.props.scroll.y) {
|
||||
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
this.currentIndex = 0;
|
||||
this.startIndex = this.currentIndex; //数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
|
||||
}
|
||||
};
|
||||
|
||||
BigData.prototype.componentDidMount = function componentDidMount() {
|
||||
var _this3 = this;
|
||||
|
||||
var isTreeType = this.checkIsTreeType();
|
||||
if (isTreeType) {
|
||||
var data = this.props.data;
|
||||
|
||||
data.forEach(function (item, index) {
|
||||
_this3.firstLevelKey[index] = _this3.getRowKey(item, index);
|
||||
_this3.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this3.keys[treeTypeIndex] = _this3.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this3.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
BigData.prototype.getRowKey = function getRowKey(record, index) {
|
||||
var rowKey = this.props.rowKey;
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
(0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
|
||||
return key;
|
||||
};
|
||||
/**
|
||||
*判断是否是树形结构
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
BigData.prototype.checkIsTreeType = function checkIsTreeType() {
|
||||
var data = this.props.data;
|
||||
|
||||
var rs = false;
|
||||
var len = data.length > 30 ? 30 : data.length;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for (var i = 0; i < len; i++) {
|
||||
if (data[i].children) {
|
||||
rs = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
BigData.prototype.getData = function getData(data, parentIndex) {
|
||||
var _this4 = this;
|
||||
|
||||
data.forEach(function (subItem, subIndex) {
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(subItem, subIndex);
|
||||
treeTypeIndex++;
|
||||
if (subItem.children) {
|
||||
_this4.getData(subItem.children, parentIndex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
BigData.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
this.cachedRowHeight = [];
|
||||
this.cachedRowParentIndex = [];
|
||||
};
|
||||
/**
|
||||
*获取数据区高度
|
||||
*
|
||||
|
|
@ -76,15 +159,31 @@ function bigData(Table) {
|
|||
var height = this.props.height;
|
||||
|
||||
var rowHeight = height ? height : defaultHeight;
|
||||
var sumHeight = 0;
|
||||
var sumHeight = 0,
|
||||
currentKey = void 0,
|
||||
currentRowHeight = rowHeight;
|
||||
|
||||
for (var i = start; i < end; i++) {
|
||||
sumHeight += this.cachedRowHeight[i] || rowHeight;
|
||||
if (this.cachedRowHeight[i] == undefined) {
|
||||
if (this.treeType) {
|
||||
currentKey = this.keys[i];
|
||||
currentRowHeight = 0;
|
||||
if (this.firstLevelKey.indexOf(currentKey) >= 0 || this.expandChildRowKeys.indexOf(currentKey) >= 0) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
sumHeight += currentRowHeight;
|
||||
} else {
|
||||
sumHeight += this.cachedRowHeight[i];
|
||||
}
|
||||
}
|
||||
return sumHeight;
|
||||
};
|
||||
|
||||
/**
|
||||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*@param treeType是否是树状表
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -92,6 +191,42 @@ function bigData(Table) {
|
|||
this.cachedRowHeight[index] = height;
|
||||
};
|
||||
|
||||
BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {}
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
|
||||
/**
|
||||
*
|
||||
*根据当前行号获取该行的父节点行号
|
||||
* @param {*} currentIndex 当前行号
|
||||
*/
|
||||
;
|
||||
|
||||
BigData.prototype.getParentIndex = function getParentIndex(targetIndex) {
|
||||
var data = this.props.data;
|
||||
|
||||
var parentIndex = -1;
|
||||
parentIndex = this.getIndex(data, -1, targetIndex);
|
||||
if (parentIndex < 0) {
|
||||
//小于0说明没有展开的子节点
|
||||
parentIndex = targetIndex;
|
||||
}
|
||||
return parentIndex;
|
||||
};
|
||||
|
||||
BigData.prototype.getIndex = function getIndex(data, index, targetIndex) {
|
||||
var parentIndex = index;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
index++;
|
||||
if (targetIndex <= index) {
|
||||
break;
|
||||
}
|
||||
if (data[i].children) {
|
||||
this.getIndex(data[i].children, index, targetIndex);
|
||||
}
|
||||
}
|
||||
return parentIndex;
|
||||
};
|
||||
|
||||
BigData.prototype.render = function render() {
|
||||
var data = this.props.data;
|
||||
var scrollTop = this.scrollTop;
|
||||
|
|
@ -99,16 +234,36 @@ function bigData(Table) {
|
|||
startIndex = this.startIndex;
|
||||
|
||||
var lazyLoad = {
|
||||
preHeight: this.getSumHeight(0, startIndex),
|
||||
sufHeight: this.getSumHeight(endIndex, data.length),
|
||||
startIndex: startIndex
|
||||
startIndex: startIndex,
|
||||
startParentIndex: startIndex //为树状节点做准备
|
||||
};
|
||||
if (this.treeType) {
|
||||
var preSubCounts = this.cachedRowParentIndex.findIndex(function (item) {
|
||||
return item == startIndex;
|
||||
});
|
||||
var sufSubCounts = this.cachedRowParentIndex.findIndex(function (item) {
|
||||
return item == endIndex;
|
||||
});
|
||||
lazyLoad.preHeight = this.getSumHeight(0, preSubCounts > -1 ? preSubCounts : 0);
|
||||
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts + 1 > 0 ? sufSubCounts + 1 : this.cachedRowParentIndex.length, this.cachedRowParentIndex.length);
|
||||
|
||||
if (preSubCounts > 0) {
|
||||
lazyLoad.startIndex = preSubCounts;
|
||||
}
|
||||
} else {
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
|
||||
}
|
||||
// console.log('*******ScrollTop*****'+scrollTop);
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: data.slice(startIndex, endIndex),
|
||||
lazyLoad: lazyLoad,
|
||||
handleScroll: this.handleScroll,
|
||||
scrollTop: scrollTop,
|
||||
setRowHeight: this.setRowHeight
|
||||
setRowHeight: this.setRowHeight,
|
||||
setRowParentIndex: this.setRowParentIndex,
|
||||
onExpand: this.onExpand,
|
||||
onExpandedRowsChange: this.onExpandedRowsChange
|
||||
// className={'lazy-table'}
|
||||
}));
|
||||
};
|
||||
|
|
@ -116,14 +271,19 @@ function bigData(Table) {
|
|||
return BigData;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
data: [],
|
||||
loadBuffer: 5
|
||||
loadBuffer: 5,
|
||||
rowKey: 'key'
|
||||
}, _class.propTypes = {
|
||||
loadBuffer: _propTypes2["default"].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
var _this5 = this;
|
||||
|
||||
this.handleScroll = function (nextScrollTop) {
|
||||
var _this = _this3;
|
||||
this.handleScroll = function (nextScrollTop, treeType) {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
var _this = _this5;
|
||||
var _this$props = _this.props,
|
||||
data = _this$props.data,
|
||||
height = _this$props.height,
|
||||
|
|
@ -142,6 +302,7 @@ function bigData(Table) {
|
|||
var needRender = _this.state.needRender;
|
||||
|
||||
var viewHeight = parseInt(scroll.y);
|
||||
_this.treeType = treeType;
|
||||
// let index = currentIndex;//记录下次当前位置
|
||||
// let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
|
||||
|
||||
|
|
@ -168,40 +329,84 @@ function bigData(Table) {
|
|||
// }
|
||||
var index = 0;
|
||||
var temp = nextScrollTop;
|
||||
var currentKey = void 0;
|
||||
while (temp > 0) {
|
||||
temp -= _this3.cachedRowHeight[index] || rowHeight;
|
||||
var currentRowHeight = _this5.cachedRowHeight[index];
|
||||
if (currentRowHeight === undefined) {
|
||||
if (_this5.treeType) {
|
||||
currentKey = _this5.keys[index];
|
||||
currentRowHeight = 0;
|
||||
if (_this5.firstLevelKey.indexOf(currentKey) >= 0 || _this5.expandChildRowKeys.indexOf(currentKey) >= 0) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
} else {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
temp -= currentRowHeight;
|
||||
if (temp > 0) {
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
console.log('currentIndex****', index);
|
||||
var isOrder = index - currentIndex > 0 ? true : false;
|
||||
if (index < 0) index = 0;
|
||||
console.log('currentIndex****' + index);
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if (currentIndex !== index) {
|
||||
_this.currentIndex = index;
|
||||
_this.scrollTop = nextScrollTop;
|
||||
var rowsInView = 0; //可视区域显示多少行
|
||||
var rowsHeight = 0; //可视区域内容高度
|
||||
|
||||
var tempIndex = index;
|
||||
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
|
||||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
while (rowsHeight < viewHeight && _this3.cachedRowHeight[rowsInView + index]) {
|
||||
rowsHeight += _this3.cachedRowHeight[rowsInView + index];
|
||||
rowsInView++;
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
|
||||
if (_this5.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this5.cachedRowHeight[tempIndex];
|
||||
if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) {
|
||||
rowsInView++;
|
||||
}
|
||||
}
|
||||
tempIndex++;
|
||||
}
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
if (treeType) {
|
||||
var treeIndex = index;
|
||||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
if (index === undefined) {
|
||||
console.log('index is undefined********' + treeIndex);
|
||||
index = _this5.getParentIndex(treeIndex);
|
||||
console.log("getParentIndex****" + index);
|
||||
}
|
||||
}
|
||||
console.log('parentIndex*********', index);
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
|
||||
_this3.startIndex = index - loadBuffer;
|
||||
endIndex = _this3.startIndex + loadCount;
|
||||
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
|
||||
endIndex = startIndex + loadCount;
|
||||
//树状结构则根据当前的节点重新计算startIndex和endIndex
|
||||
// if(treeType){
|
||||
// const currentParentIndex = _this.cachedRowParentIndex[index];
|
||||
// startIndex = currentParentIndex - loadBuffer>0?currentParentIndex - loadBuffer:0;
|
||||
// endIndex = startIndex + loadCount;
|
||||
// // console.log(endIndex,"endIndex的parentIndex",parentEndIndex);
|
||||
// // endIndex = parentEndIndex +1
|
||||
// }else{
|
||||
// startIndex = index - loadBuffer>0?index - loadBuffer:0;
|
||||
// endIndex = startIndex + loadCount;
|
||||
// }
|
||||
if (endIndex > data.length) {
|
||||
endIndex = data.length;
|
||||
}
|
||||
_this3.endIndex = endIndex;
|
||||
_this3.setState({ needRender: !needRender });
|
||||
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = endIndex;
|
||||
_this5.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log("===================", "**index**" + index, " **startIndex**" + _this5.startIndex, "**endIndex**" + _this5.endIndex);
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
if (!isOrder && index < startIndex + rowDiff) {
|
||||
|
|
@ -209,14 +414,33 @@ function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
_this3.startIndex = startIndex;
|
||||
_this3.endIndex = _this3.startIndex + loadCount;
|
||||
_this3.setState({ needRender: !needRender });
|
||||
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = _this5.startIndex + loadCount;
|
||||
_this5.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log("**index**" + index, "**startIndex**" + _this5.startIndex, "**endIndex**" + _this5.endIndex);
|
||||
}
|
||||
}
|
||||
console.log('**index**' + index, "**startIndex**" + _this3.startIndex, "**endIndex**" + _this3.endIndex);
|
||||
}
|
||||
};
|
||||
|
||||
this.onExpand = function (expandState, record) {
|
||||
var _this = _this5;
|
||||
// 展开
|
||||
if (expandState) {
|
||||
record.children && record.children.forEach(function (item, index) {
|
||||
_this.expandChildRowKeys.push(_this.getRowKey(item, index));
|
||||
});
|
||||
} else {
|
||||
// 收起
|
||||
record.children && record.children.forEach(function (item, index) {
|
||||
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(function (fitem) {
|
||||
return fitem.key === item.key;
|
||||
}), 1);
|
||||
});
|
||||
}
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -81,13 +81,13 @@ class Demo31 extends Component {
|
|||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
let height = 42 * (this.state.data_obj[record.key].length+ 2);
|
||||
|
||||
let height = 42 * (this.state.data_obj[0].length+ 2);
|
||||
const data = record.key%2?this.state.data_obj[0]:this.state.data_obj[0]
|
||||
return (
|
||||
<Table
|
||||
|
||||
columns={innerColumns}
|
||||
// style={{height:height}}
|
||||
style={{height:height}}
|
||||
data={this.state.data_obj[record.key]}
|
||||
|
||||
/>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8427,8 +8427,7 @@ ul {
|
|||
.u-table-hiden-drag-li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 10px; }
|
||||
left: 0px; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -8660,7 +8659,7 @@ ul {
|
|||
.u-table-thead-th-drag-gap .online {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: transparent;
|
||||
background: #e9e9e9;
|
||||
margin: 0 auto; }
|
||||
.u-table-thead-th-drag-gap .online-hover {
|
||||
background: #000000; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -194,7 +194,7 @@ class Table extends Component {
|
|||
this.firstDid = true;//避免重复update
|
||||
}
|
||||
|
||||
console.log('this.scrollTop**********',this.scrollTop);
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1010,7 +1010,7 @@ class Table extends Component {
|
|||
.add(`${clsPrefix}-scroll-position-${position}`);
|
||||
}
|
||||
}
|
||||
console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ $checkbox-height:16px;
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 10px;
|
||||
// height: 10px;//这个高度先注释掉了，加上后，在火狐浏览器上会站位置。滚动条拉到最右边有错行
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
|
@ -402,7 +402,7 @@ $checkbox-height:16px;
|
|||
.online{
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background:transparent;
|
||||
background:#e9e9e9;//兼容火狐浏览器，如果table设置border，
|
||||
margin: 0 auto;
|
||||
}
|
||||
.online-hover{
|
||||
|
|
|
|||
|
|
@ -89,8 +89,9 @@ export default function bigData(Table) {
|
|||
checkIsTreeType(){
|
||||
const {data} = this.props;
|
||||
let rs = false;
|
||||
const len = data.length>30?30: data.length;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for(let i = 0 ;i<30;i++){
|
||||
for(let i = 0 ;i<len;i++){
|
||||
if(data[i].children){
|
||||
rs = true;
|
||||
break;
|
||||
|
|
@ -214,7 +215,7 @@ export default function bigData(Table) {
|
|||
index += 1;
|
||||
}
|
||||
}
|
||||
console.log('currentIndex****',index);
|
||||
// console.log('currentIndex****',index);
|
||||
const isOrder = index - currentIndex > 0 ? true : false;
|
||||
if (index < 0) index = 0;
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
|
|
@ -243,13 +244,13 @@ export default function bigData(Table) {
|
|||
const treeIndex = index
|
||||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
if(index === undefined){
|
||||
console.log('index is undefined********'+treeIndex);
|
||||
// console.log('index is undefined********'+treeIndex);
|
||||
index = this.getParentIndex(treeIndex);
|
||||
console.log("getParentIndex****"+index);
|
||||
// console.log("getParentIndex****"+index);
|
||||
}
|
||||
|
||||
}
|
||||
console.log('parentIndex*********',index);
|
||||
// console.log('parentIndex*********',index);
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
|
|
@ -275,12 +276,12 @@ export default function bigData(Table) {
|
|||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log(
|
||||
"===================",
|
||||
"**index**" + index,
|
||||
" **startIndex**" + this.startIndex,
|
||||
"**endIndex**" + this.endIndex
|
||||
);
|
||||
// console.log(
|
||||
// "===================",
|
||||
// "**index**" + index,
|
||||
// " **startIndex**" + this.startIndex,
|
||||
// "**endIndex**" + this.endIndex
|
||||
// );
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
if (!isOrder && index < startIndex + rowDiff) {
|
||||
|
|
@ -293,11 +294,11 @@ export default function bigData(Table) {
|
|||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log(
|
||||
"**index**" + index,
|
||||
"**startIndex**" + this.startIndex,
|
||||
"**endIndex**" + this.endIndex
|
||||
);
|
||||
// console.log(
|
||||
// "**index**" + index,
|
||||
// "**startIndex**" + this.startIndex,
|
||||
// "**endIndex**" + this.endIndex
|
||||
// );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -379,7 +380,7 @@ export default function bigData(Table) {
|
|||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
|
||||
|
||||
}
|
||||
console.log('*******ScrollTop*****'+scrollTop);
|
||||
// console.log('*******ScrollTop*****'+scrollTop);
|
||||
return (
|
||||
<Table
|
||||
{...this.props}
|
||||
|
|
|
|||
Loading…
Reference in New Issue