publish 1.6.26
This commit is contained in:
jonyshi
commit
d5f55ca081
|
|
@ -375,9 +375,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'
|
||||
};
|
||||
|
||||
|
|
@ -175,11 +177,7 @@ var Table = function (_Component) {
|
|||
|
||||
_this.onKeyDown = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
// event.preventDefault&&event.preventDefault();
|
||||
// event.preventDefault?event.preventDefault():event.returnValue = false;
|
||||
// if (event.keyCode === 9){//tab
|
||||
// // this.props.onKeyTab&&this.props.onKeyTab();
|
||||
// }else
|
||||
if (event.keyCode === 38) {
|
||||
//up
|
||||
event.preventDefault && event.preventDefault();
|
||||
|
|
@ -190,11 +188,6 @@ var Table = function (_Component) {
|
|||
_this.props.onKeyDown && _this.props.onKeyDown();
|
||||
}
|
||||
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
||||
// else if(event.altKey && event.keyCode === 38){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('up');
|
||||
// }else if(event.altKey && event.keyCode === 40){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('down');
|
||||
// }
|
||||
};
|
||||
|
||||
var expandedRowKeys = [];
|
||||
|
|
@ -296,7 +289,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() {
|
||||
|
|
@ -305,8 +301,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);
|
||||
|
|
@ -613,8 +610,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;
|
||||
|
|
@ -635,11 +647,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);
|
||||
|
|
@ -649,7 +661,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') {
|
||||
|
|
@ -661,6 +673,7 @@ var Table = function (_Component) {
|
|||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
}
|
||||
//fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
|
||||
var fixedIndex = i;
|
||||
//判断是否是tree结构
|
||||
if (this.treeType) {
|
||||
|
|
@ -687,6 +700,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,
|
||||
|
|
@ -695,7 +717,7 @@ var Table = function (_Component) {
|
|||
record: record,
|
||||
expandIconAsCell: expandIconAsCell,
|
||||
onDestroy: this.onRowDestroy,
|
||||
index: fixedIndex + lazyCurrentIndex,
|
||||
index: index,
|
||||
visible: visible,
|
||||
expandRowByClick: expandRowByClick,
|
||||
onExpand: this.onExpanded,
|
||||
|
|
@ -715,9 +737,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;
|
||||
|
|
@ -727,11 +753,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;
|
||||
|
|
@ -1149,7 +1175,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,93 @@ 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.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;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for (var i = 0; i < 30; 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 +158,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 +190,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 +233,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 +270,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 +301,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 +328,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++;
|
||||
}
|
||||
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 +413,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"];
|
||||
|
|
@ -204,11 +204,11 @@ class Demo25 extends Component {
|
|||
columns={columns}
|
||||
data={dataList}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
|
||||
checkMinSize={7}
|
||||
draggable={true}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
scroll={{x:"130%", y: 100}}
|
||||
scroll={{x:true, y: 100}}
|
||||
selectedRow={this.selectedRow}
|
||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
*
|
||||
* @title 树状结构的大数据场景
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const columns = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'150',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
fixed:'right',
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [ ...new Array(1000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}else{
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo30 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
onExpandedRowsChange = (params)=>{
|
||||
console.log(params);
|
||||
}
|
||||
onExpand = (expandKeys)=>{
|
||||
console.log('expand---'+expandKeys);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo30;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -8691,8 +8691,7 @@ ul {
|
|||
zoom: 1;
|
||||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999;
|
||||
transition: all 0.3s; }
|
||||
color: #999; }
|
||||
.u-table-thead th:hover .bee-table-column-sorter {
|
||||
display: inline-block; }
|
||||
.u-table-thead .th-drag {
|
||||
|
|
|
|||
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
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.25",
|
||||
"version": "1.6.26",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
67
src/Table.js
67
src/Table.js
|
|
@ -80,6 +80,8 @@ const defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale:{},
|
||||
syncHover: true,
|
||||
setRowHeight:()=>{},
|
||||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0'
|
||||
};
|
||||
|
||||
|
|
@ -187,8 +189,11 @@ class Table extends Component {
|
|||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
this.firstDid = true;//避免重复update
|
||||
}
|
||||
|
||||
console.log('this.scrollTop**********',this.scrollTop);
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
|
|
@ -197,8 +202,9 @@ class Table extends 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);
|
||||
|
|
@ -480,8 +486,19 @@ class Table extends Component {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
getRowsByData(data, visible, indent, columns, fixed) {
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {*} data
|
||||
* @param {*} visible
|
||||
* @param {*} indent 层级
|
||||
* @param {*} columns
|
||||
* @param {*} fixed
|
||||
* @param {number} [rootIndex=-1] 祖级节点
|
||||
* @returns
|
||||
* @memberof Table
|
||||
*/
|
||||
getRowsByData(data, visible, indent, columns, fixed,rootIndex=-1) {
|
||||
const props = this.props;
|
||||
const childrenColumnName = props.childrenColumnName;
|
||||
const expandedRowRender = props.expandedRowRender;
|
||||
|
|
@ -499,13 +516,13 @@ class Table extends Component {
|
|||
|
||||
const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight){
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
|
||||
|
||||
const lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ?props.lazyLoad.startParentIndex :0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const record = data[i];
|
||||
const key = this.getRowKey(record, i);
|
||||
|
|
@ -515,7 +532,7 @@ class Table extends Component {
|
|||
let 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') {
|
||||
|
|
@ -527,6 +544,7 @@ class Table extends Component {
|
|||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
}
|
||||
//fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
|
||||
let fixedIndex = i;
|
||||
//判断是否是tree结构
|
||||
if (this.treeType) {
|
||||
|
|
@ -554,7 +572,15 @@ class Table extends Component {
|
|||
className = className + ' sumrow';
|
||||
}
|
||||
|
||||
|
||||
let paramRootIndex = rootIndex;
|
||||
//小于0说明为第一层节点，她的子孙节点要保存自己的根节点
|
||||
if(paramRootIndex<0){
|
||||
paramRootIndex = i+lazyParentIndex;
|
||||
}
|
||||
let index = i;
|
||||
if(rootIndex ==-1){
|
||||
index = i+lazyParentIndex
|
||||
}
|
||||
rst.push(
|
||||
<TableRow
|
||||
indent={indent}
|
||||
|
|
@ -564,7 +590,7 @@ class Table extends Component {
|
|||
record={record}
|
||||
expandIconAsCell={expandIconAsCell}
|
||||
onDestroy={this.onRowDestroy}
|
||||
index={fixedIndex+lazyCurrentIndex}
|
||||
index={index}
|
||||
visible={visible}
|
||||
expandRowByClick={expandRowByClick}
|
||||
onExpand={this.onExpanded}
|
||||
|
|
@ -584,9 +610,13 @@ class Table extends Component {
|
|||
ref={rowRef}
|
||||
store={this.store}
|
||||
fixed={fixed}
|
||||
lazyCurrentIndex={lazyCurrentIndex}
|
||||
expandedContentHeight={expandedContentHeight}
|
||||
setRowHeight={props.setRowHeight}
|
||||
setRowParentIndex={props.setRowParentIndex}
|
||||
treeType={childrenColumn||this.treeType?true:false}
|
||||
fixedIndex={fixedIndex+lazyCurrentIndex}
|
||||
rootIndex = {rootIndex}
|
||||
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -600,12 +630,12 @@ class Table extends Component {
|
|||
if (childrenColumn) {
|
||||
this.treeType = true;//证明是tree表形式visible = {true}
|
||||
rst = rst.concat(this.getRowsByData(
|
||||
childrenColumn, subVisible, indent + 1, columns, fixed
|
||||
childrenColumn, subVisible, indent + 1, columns, fixed,paramRootIndex
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight){
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.sufHeight} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
|
|
@ -993,15 +1023,13 @@ class Table extends Component {
|
|||
this.lastScrollTop = e.target.scrollTop;
|
||||
if(handleScroll){
|
||||
debounce(
|
||||
handleScroll(this.lastScrollTop)
|
||||
,500);
|
||||
|
||||
handleScroll(this.lastScrollTop,this.treeType),
|
||||
300)
|
||||
}
|
||||
}
|
||||
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
this.lastScrollLeft = e.target.scrollLeft;
|
||||
|
||||
}
|
||||
|
||||
handleRowHover(isHover, key) {
|
||||
|
|
@ -1021,11 +1049,7 @@ class Table extends Component {
|
|||
|
||||
onKeyDown=(e)=>{
|
||||
let event = Event.getEvent(e);
|
||||
// event.preventDefault&&event.preventDefault();
|
||||
// event.preventDefault?event.preventDefault():event.returnValue = false;
|
||||
// if (event.keyCode === 9){//tab
|
||||
// // this.props.onKeyTab&&this.props.onKeyTab();
|
||||
// }else
|
||||
if(event.keyCode === 38){//up
|
||||
event.preventDefault&&event.preventDefault();
|
||||
this.props.onKeyUp&&this.props.onKeyUp();
|
||||
|
|
@ -1034,11 +1058,6 @@ class Table extends Component {
|
|||
this.props.onKeyDown&&this.props.onKeyDown();
|
||||
}
|
||||
this.props.onTableKeyDown&&this.props.onTableKeyDown();
|
||||
// else if(event.altKey && event.keyCode === 38){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('up');
|
||||
// }else if(event.altKey && event.keyCode === 40){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('down');
|
||||
// }
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -361,8 +361,8 @@ $checkbox-height:16px;
|
|||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
// -webkit-transition: all 0.3s;
|
||||
// transition: all 0.3s;
|
||||
}
|
||||
&:hover{
|
||||
.bee-table-column-sorter {
|
||||
|
|
@ -726,7 +726,5 @@ $checkbox-height:16px;
|
|||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
}
|
||||
.u-checkbox .u-checkbox-label:after,.u-checkbox .u-checkbox-label::before {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -539,7 +539,7 @@ class TableHeader extends Component {
|
|||
return (
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
<tr style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@ const defaultProps = {
|
|||
expandIconColumnIndex: 0,
|
||||
expandRowByClick: false,
|
||||
onHover() {},
|
||||
className:''
|
||||
className:'',
|
||||
setRowParentIndex:()=>{}
|
||||
};
|
||||
|
||||
class TableRow extends Component{
|
||||
|
|
@ -57,7 +58,7 @@ class TableRow extends Component{
|
|||
|
||||
|
||||
componentDidMount() {
|
||||
const { store, hoverKey } = this.props;
|
||||
const { store, hoverKey,treeType } = this.props;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
this.setState({ hovered: true });
|
||||
|
|
@ -67,13 +68,25 @@ class TableRow extends Component{
|
|||
});
|
||||
|
||||
this.setRowHeight()
|
||||
if(treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
}
|
||||
componentWillUnmount() {
|
||||
const { record, onDestroy, index } = this.props;
|
||||
|
|
@ -85,9 +98,15 @@ class TableRow extends Component{
|
|||
|
||||
|
||||
setRowHeight() {
|
||||
const { setRowHeight , expandedContentHeight=0,lazyCurrentIndex=0,fixed} = this.props
|
||||
const { setRowHeight , expandedContentHeight=0,fixed,fixedIndex} = this.props
|
||||
if (!setRowHeight || !this.element || fixed) return
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index)
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex)
|
||||
}
|
||||
setRowParentIndex(){
|
||||
const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
|
||||
|
||||
}
|
||||
|
||||
onRowClick(event) {
|
||||
|
|
@ -143,7 +162,7 @@ class TableRow extends Component{
|
|||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,lazyCurrentIndex=0
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,117 @@
|
|||
import React, { Component } from "react";
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import PropTypes from "prop-types";
|
||||
import { warningOnce } from '../utils';
|
||||
const defaultHeight = 40;
|
||||
const rowDiff = 3;//行差值
|
||||
|
||||
const rowDiff = 3; //行差值
|
||||
let treeTypeIndex = 0;
|
||||
export default function bigData(Table) {
|
||||
return class BigData extends Component {
|
||||
|
||||
static defaultProps = {
|
||||
data: [],
|
||||
loadBuffer:5
|
||||
static defaultProps = {
|
||||
data: [],
|
||||
loadBuffer: 5,
|
||||
rowKey: 'key',
|
||||
};
|
||||
static propTypes = {
|
||||
loadBuffer: PropTypes.number,
|
||||
}
|
||||
loadBuffer: PropTypes.number
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0
|
||||
};
|
||||
const rowHeight = this.props.height?this.props.height:defaultHeight
|
||||
const rowHeight = this.props.height ? this.props.height : defaultHeight;
|
||||
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
|
||||
const scrollY = this.props.scroll.y ? parseInt(this.props.scroll.y) : 0;
|
||||
this.rowsInView = scrollY ?Math.ceil(scrollY/rowHeight):20 ;
|
||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
this.currentIndex = 0;
|
||||
this.loadCount = props.loadBuffer? this.rowsInView + props.loadBuffer*2:26;//一次加载多少数据
|
||||
this.cachedRowHeight = [];//缓存每行的高度
|
||||
this.loadCount = props.loadBuffer
|
||||
? this.rowsInView + props.loadBuffer * 2
|
||||
: 26; //一次加载多少数据
|
||||
this.cachedRowHeight = []; //缓存每行的高度
|
||||
this.cachedRowParentIndex=[];
|
||||
this.expandChildRowKeys=[];
|
||||
this.firstLevelKey=[];
|
||||
this.keys=[];
|
||||
this.lastScrollTop = 0;
|
||||
this.currentScrollTop = 0;
|
||||
this.startIndex = this.currentIndex;//数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount//数据结束位置
|
||||
this.startIndex = this.currentIndex; //数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
|
||||
this.setRowHeight = this.setRowHeight.bind(this);
|
||||
this.setRowParentIndex = this.setRowParentIndex.bind(this);
|
||||
}
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.scroll.y !== this.props.scroll.y){
|
||||
const 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; //数据结束位置
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
const isTreeType = this.checkIsTreeType();
|
||||
if(isTreeType){
|
||||
const {data} = this.props;
|
||||
data.forEach((item,index)=>{
|
||||
this.firstLevelKey[index] = this.getRowKey(item,index);
|
||||
this.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
this.keys[treeTypeIndex] = this.getRowKey(item,index);
|
||||
treeTypeIndex++;
|
||||
if(item.children){
|
||||
this.getData(item.children,index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getRowKey(record, index) {
|
||||
const rowKey = this.props.rowKey;
|
||||
const key = (typeof rowKey === 'function') ?
|
||||
rowKey(record, index) : record[rowKey];
|
||||
warningOnce(
|
||||
key !== undefined,
|
||||
'Each record in table should have a unique `key` prop,' +
|
||||
'or set `rowKey` to an unique primary key.'
|
||||
);
|
||||
return key;
|
||||
}
|
||||
/**
|
||||
*判断是否是树形结构
|
||||
*
|
||||
*/
|
||||
checkIsTreeType(){
|
||||
const {data} = this.props;
|
||||
let rs = false;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for(let i = 0 ;i<30;i++){
|
||||
if(data[i].children){
|
||||
rs = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
}
|
||||
getData(data,parentIndex){
|
||||
data.forEach((subItem,subIndex)=>{
|
||||
this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex);
|
||||
treeTypeIndex++;
|
||||
if(subItem.children){
|
||||
this.getData(subItem.children,parentIndex);
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
componentWillUnmount(){
|
||||
this.cachedRowHeight = [];
|
||||
this.cachedRowParentIndex = [];
|
||||
}
|
||||
/**
|
||||
*获取数据区高度
|
||||
|
|
@ -45,114 +125,261 @@ export default function bigData(Table) {
|
|||
|
||||
getSumHeight(start, end) {
|
||||
const { height } = this.props;
|
||||
const rowHeight = height?height:defaultHeight;
|
||||
let sumHeight = 0;
|
||||
let rowHeight = height ? height : defaultHeight;
|
||||
let sumHeight = 0,currentKey,currentRowHeight=rowHeight;
|
||||
|
||||
for (let 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
|
||||
*/
|
||||
handleScroll = (nextScrollTop)=> {
|
||||
const _this = this;
|
||||
const {data,height,scroll={},loadBuffer} = _this.props;
|
||||
const rowHeight = height?height:defaultHeight;
|
||||
const {currentIndex = 0 ,loadCount,scrollTop,currentScrollTop} = _this;
|
||||
let {endIndex,startIndex} = _this;
|
||||
const {needRender} = _this.state;
|
||||
const viewHeight = parseInt(scroll.y);
|
||||
// let index = currentIndex;//记录下次当前位置
|
||||
// let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
|
||||
|
||||
// const isOrder = temp > 0 ?true:false;//true为向下滚动、false为向上滚动
|
||||
/**
|
||||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*@param treeType是否是树状表
|
||||
*/
|
||||
handleScroll = (nextScrollTop, treeType) => {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
const _this = this;
|
||||
const { data, height, scroll = {}, loadBuffer } = _this.props;
|
||||
const rowHeight = height ? height : defaultHeight;
|
||||
const {
|
||||
currentIndex = 0,
|
||||
loadCount,
|
||||
scrollTop,
|
||||
currentScrollTop
|
||||
} = _this;
|
||||
let { endIndex, startIndex } = _this;
|
||||
const { needRender } = _this.state;
|
||||
const viewHeight = parseInt(scroll.y);
|
||||
_this.treeType = treeType;
|
||||
// let index = currentIndex;//记录下次当前位置
|
||||
// let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
|
||||
|
||||
// //根据scrollTop计算下次当前索引的位置
|
||||
// if(isOrder){
|
||||
// while (temp > 0) {
|
||||
// temp -= this.cachedRowHeight[index] || rowHeight
|
||||
// if(temp > 0){
|
||||
// index += 1
|
||||
// //保存当前index对应的scrollTop
|
||||
// this.currentScrollTop += this.cachedRowHeight[index]|| rowHeight;
|
||||
// }
|
||||
// }
|
||||
// }else{
|
||||
// while(temp < 0){
|
||||
// temp += this.cachedRowHeight[index] || rowHeight
|
||||
// if(temp < 0){
|
||||
// index -= 1
|
||||
// this.currentScrollTop -= this.cachedRowHeight[index]|| rowHeight;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
let index = 0;
|
||||
let temp = nextScrollTop;
|
||||
while (temp > 0) {
|
||||
temp -= this.cachedRowHeight[index] || rowHeight
|
||||
if(temp > 0){
|
||||
index += 1
|
||||
// const isOrder = temp > 0 ?true:false;//true为向下滚动、false为向上滚动
|
||||
|
||||
// //根据scrollTop计算下次当前索引的位置
|
||||
// if(isOrder){
|
||||
// while (temp > 0) {
|
||||
// temp -= this.cachedRowHeight[index] || rowHeight
|
||||
// if(temp > 0){
|
||||
// index += 1
|
||||
// //保存当前index对应的scrollTop
|
||||
// this.currentScrollTop += this.cachedRowHeight[index]|| rowHeight;
|
||||
// }
|
||||
// }
|
||||
// }else{
|
||||
// while(temp < 0){
|
||||
// temp += this.cachedRowHeight[index] || rowHeight
|
||||
// if(temp < 0){
|
||||
// index -= 1
|
||||
// this.currentScrollTop -= this.cachedRowHeight[index]|| rowHeight;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
let index = 0;
|
||||
let temp = nextScrollTop;
|
||||
let currentKey;
|
||||
while (temp >0) {
|
||||
let currentRowHeight = this.cachedRowHeight[index];
|
||||
if(currentRowHeight === undefined){
|
||||
if(this.treeType){
|
||||
currentKey = this.keys[index];
|
||||
currentRowHeight = 0;
|
||||
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}else{
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
|
||||
}
|
||||
temp -= currentRowHeight;
|
||||
if (temp > 0) {
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
console.log('currentIndex****',index);
|
||||
const isOrder = index - currentIndex > 0 ? true : false;
|
||||
if (index < 0) index = 0;
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if (currentIndex !== index) {
|
||||
_this.currentIndex = index;
|
||||
_this.scrollTop = nextScrollTop;
|
||||
let rowsInView = 0; //可视区域显示多少行
|
||||
let rowsHeight = 0; //可视区域内容高度
|
||||
let tempIndex = index;
|
||||
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
|
||||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) {
|
||||
if(this.cachedRowHeight[tempIndex]){
|
||||
rowsHeight += this.cachedRowHeight[tempIndex];
|
||||
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){
|
||||
rowsInView++;
|
||||
}
|
||||
|
||||
}
|
||||
tempIndex++;
|
||||
|
||||
}
|
||||
if(treeType){
|
||||
const treeIndex = index
|
||||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
if(index === undefined){
|
||||
console.log('index is undefined********'+treeIndex);
|
||||
index = this.getParentIndex(treeIndex);
|
||||
console.log("getParentIndex****"+index);
|
||||
}
|
||||
|
||||
}
|
||||
console.log('parentIndex*********',index);
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
|
||||
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;
|
||||
}
|
||||
if(startIndex!==this.startIndex||endIndex!==this.endIndex){
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log(
|
||||
"===================",
|
||||
"**index**" + index,
|
||||
" **startIndex**" + this.startIndex,
|
||||
"**endIndex**" + this.endIndex
|
||||
);
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
if (!isOrder && index < startIndex + rowDiff) {
|
||||
startIndex = index - loadBuffer;
|
||||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if(startIndex!==this.startIndex||endIndex!==this.endIndex){
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
console.log(
|
||||
"**index**" + index,
|
||||
"**startIndex**" + this.startIndex,
|
||||
"**endIndex**" + this.endIndex
|
||||
);
|
||||
}
|
||||
}
|
||||
const isOrder = index - currentIndex > 0 ?true:false;
|
||||
if (index < 0) index = 0
|
||||
console.log('currentIndex****'+index);
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if(currentIndex !== index){
|
||||
_this.currentIndex = index;
|
||||
_this.scrollTop = nextScrollTop;
|
||||
let rowsInView = 0 ; //可视区域显示多少行
|
||||
let rowsHeight = 0; //可视区域内容高度
|
||||
|
||||
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
|
||||
if(viewHeight){
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
while(rowsHeight < viewHeight && this.cachedRowHeight[rowsInView + index] ){
|
||||
rowsHeight += this.cachedRowHeight[rowsInView + index];
|
||||
rowsInView++;
|
||||
}
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if(rowsInView+index > endIndex - rowDiff && isOrder){
|
||||
|
||||
this.startIndex = index - loadBuffer;
|
||||
endIndex = this.startIndex + loadCount
|
||||
if(endIndex > data.length){
|
||||
endIndex = data.length
|
||||
}
|
||||
this.endIndex = endIndex;
|
||||
this.setState({needRender: !needRender });
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
if(!isOrder && index < startIndex + rowDiff){
|
||||
startIndex = index - loadBuffer;
|
||||
if(startIndex<0){
|
||||
startIndex = 0;
|
||||
}
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount
|
||||
this.setState({needRender: !needRender });
|
||||
}
|
||||
}
|
||||
console.log('**index**'+index,"**startIndex**"+this.startIndex,"**endIndex**"+this.endIndex);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setRowHeight(height, index) {
|
||||
this.cachedRowHeight[index] = height
|
||||
this.cachedRowHeight[index] = height;
|
||||
}
|
||||
setRowParentIndex(parentIndex,index){
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
}
|
||||
/**
|
||||
*
|
||||
*根据当前行号获取该行的父节点行号
|
||||
* @param {*} currentIndex 当前行号
|
||||
*/
|
||||
getParentIndex(targetIndex) {
|
||||
const {data} = this.props;
|
||||
let parentIndex = -1;
|
||||
parentIndex = this.getIndex(data,-1,targetIndex);
|
||||
if(parentIndex<0){//小于0说明没有展开的子节点
|
||||
parentIndex = targetIndex;
|
||||
}
|
||||
return parentIndex;
|
||||
|
||||
}
|
||||
getIndex(data,index,targetIndex){
|
||||
const parentIndex = index;
|
||||
for(let i=0;i<data.length;i++){
|
||||
index++;
|
||||
if(targetIndex <=index){
|
||||
break;
|
||||
}
|
||||
if(data[i].children){
|
||||
this.getIndex(data[i].children,index,targetIndex);
|
||||
}
|
||||
|
||||
}
|
||||
return parentIndex;
|
||||
}
|
||||
|
||||
|
||||
onExpand = (expandState,record)=>{
|
||||
const _this = this;
|
||||
// 展开
|
||||
if(expandState){
|
||||
record.children && record.children.forEach((item,index)=>{
|
||||
_this.expandChildRowKeys.push( _this.getRowKey(item,index));
|
||||
})
|
||||
}else{
|
||||
// 收起
|
||||
record.children && record.children.forEach((item,index)=>{
|
||||
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1)
|
||||
})
|
||||
}
|
||||
}
|
||||
render() {
|
||||
|
||||
const { data } = this.props;
|
||||
const { scrollTop } = this;
|
||||
const {endIndex,startIndex} = this;
|
||||
const { endIndex, startIndex } = this;
|
||||
const lazyLoad = {
|
||||
preHeight: this.getSumHeight(0, startIndex),
|
||||
sufHeight: this.getSumHeight(endIndex , data.length),
|
||||
startIndex:startIndex
|
||||
startIndex: startIndex,
|
||||
startParentIndex:startIndex,//为树状节点做准备
|
||||
};
|
||||
if(this.treeType){
|
||||
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex })
|
||||
const sufSubCounts = this.cachedRowParentIndex.findIndex(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 (
|
||||
<Table
|
||||
{...this.props}
|
||||
|
|
@ -161,10 +388,12 @@ handleScroll = (nextScrollTop)=> {
|
|||
handleScroll={this.handleScroll}
|
||||
scrollTop={scrollTop}
|
||||
setRowHeight={this.setRowHeight}
|
||||
// className={'lazy-table'}
|
||||
setRowParentIndex = {this.setRowParentIndex}
|
||||
onExpand = {this.onExpand}
|
||||
onExpandedRowsChange = {this.onExpandedRowsChange}
|
||||
// className={'lazy-table'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,3 +67,6 @@ export function ObjectAssign(obj){
|
|||
}
|
||||
return tagObj;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue