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

feat:滚动加载，递归逻辑优化，willReceiveProps逻辑优化

This commit is contained in:
yangchch6 2019-12-05 10:04:21 +08:00
parent 9dd63de212
commit 1a84262dc0
4 changed files with 71 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
build/lib/bigData.js
View File

@ -91,35 +91,28 @@ function bigData(Table) {
_this.startIndex = _this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
} }
if (nextProps.data.toString() !== props.data.toString()) { if ('data' in nextProps) {
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data); var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
_this.treeType = isTreeType; _this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun) //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
_this.cachedRowHeight = []; //缓存每行的高度 if (nextProps.data.toString() !== props.data.toString()) {
_this.cachedRowParentIndex = []; _this.cachedRowHeight = []; //缓存每行的高度
_this.computeCachedRowParentIndex(nextProps.data); _this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
}
_this.treeData = []; _this.treeData = [];
_this.flatTreeData = []; _this.flatTreeData = [];
if (nextProps.data.length > 0) { if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
} }
if (isTreeType) { if (isTreeType) {
_this.getTreeData(); _this.getTreeData(newExpandedKeys);
} }
} }
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex //如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) { if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
_this.setStartAndEndIndex(currentIndex, dataLen); _this.setStartAndEndIndex(currentIndex, dataLen);
} }
if (newExpandedKeys !== props.expandedRowKeys) {
_this.cacheExpandedKeys = new Set(newExpandedKeys);
//重新递归数据
var flatTreeData = _this.deepTraversal(data);
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
}; };
BigData.prototype.componentWillMount = function componentWillMount() { BigData.prototype.componentWillMount = function componentWillMount() {
@ -139,6 +132,7 @@ function bigData(Table) {
/** /**
* 如果是树形表，需要对传入的 data 进行处理 * 如果是树形表，需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
*/ */
@ -146,7 +140,6 @@ function bigData(Table) {
* 深度遍历树形 data，把数据拍平，变为一维数组 * 深度遍历树形 data，把数据拍平，变为一维数组
* @param {*} data * @param {*} data
* @param {*} parentKey 标识父节点 * @param {*} parentKey 标识父节点
* @param {*} isShown 该节点是否显示在页面中，当节点的父节点是展开状态 或 该节点是根节点时，该值为 true
*/ */
@ -381,21 +374,25 @@ function bigData(Table) {
}, _initialiseProps = function _initialiseProps() { }, _initialiseProps = function _initialiseProps() {
var _this4 = this; var _this4 = this;
this.getTreeData = function () { this.getTreeData = function (expandedKeys) {
var startIndex = _this4.startIndex, var startIndex = _this4.startIndex,
endIndex = _this4.endIndex; endIndex = _this4.endIndex,
cacheExpandedKeys = _this4.cacheExpandedKeys;
var data = _this4.props.data; var data = _this4.props.data;
cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
var sliceTreeList = []; var sliceTreeList = [];
var flatTreeData = _this4.deepTraversal(data); var flatTreeData = _this4.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
_this4.flatTreeData = flatTreeData; _this4.flatTreeData = flatTreeData;
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
_this4.handleTreeListChange(sliceTreeList); _this4.handleTreeListChange(sliceTreeList);
cacheExpandedKeys = expandedKeys && null;
}; };
this.deepTraversal = function (treeData) { this.deepTraversal = function (treeData) {
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isShown = arguments[2];
var _this = _this4; var _this = _this4;
var cacheExpandedKeys = _this.cacheExpandedKeys, var cacheExpandedKeys = _this.cacheExpandedKeys,
@ -420,18 +417,16 @@ function bigData(Table) {
key: key, key: key,
isExpanded: isExpanded, isExpanded: isExpanded,
parentKey: parentKey, parentKey: parentKey,
isShown: isShown,
isLeaf: isLeaf, isLeaf: isLeaf,
index: flatTreeData.length index: flatTreeData.length
}, _extends({}, props)); }, _extends({}, props));
//该节点的父节点是展开状态 或 该节点是根节点
if (isShown || parentKey === null) { flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组 flatTreeKeysMap[key] = dataCopyI;
flatTreeKeysMap[key] = dataCopyI;
} // 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
if (Array.isArray(children) && children.length > 0) { if (Array.isArray(children) && children.length > 0 && isExpanded) {
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key, isExpanded));
} }
} }
} }

51
dist/demo.js vendored
View File

@ -289676,35 +289676,28 @@
_this.startIndex = _this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
} }
if (nextProps.data.toString() !== props.data.toString()) { if ('data' in nextProps) {
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data); var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
_this.treeType = isTreeType; _this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun) //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
_this.cachedRowHeight = []; //缓存每行的高度 if (nextProps.data.toString() !== props.data.toString()) {
_this.cachedRowParentIndex = []; _this.cachedRowHeight = []; //缓存每行的高度
_this.computeCachedRowParentIndex(nextProps.data); _this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
}
_this.treeData = []; _this.treeData = [];
_this.flatTreeData = []; _this.flatTreeData = [];
if (nextProps.data.length > 0) { if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
} }
if (isTreeType) { if (isTreeType) {
_this.getTreeData(); _this.getTreeData(newExpandedKeys);
} }
} }
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex //如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) { if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
_this.setStartAndEndIndex(currentIndex, dataLen); _this.setStartAndEndIndex(currentIndex, dataLen);
} }
if (newExpandedKeys !== props.expandedRowKeys) {
_this.cacheExpandedKeys = new Set(newExpandedKeys);
//重新递归数据
var flatTreeData = _this.deepTraversal(data);
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
}; };
BigData.prototype.componentWillMount = function componentWillMount() { BigData.prototype.componentWillMount = function componentWillMount() {
@ -289724,6 +289717,7 @@
/** /**
* 如果是树形表，需要对传入的 data 进行处理 * 如果是树形表，需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
*/ */
@ -289731,7 +289725,6 @@
* 深度遍历树形 data，把数据拍平，变为一维数组 * 深度遍历树形 data，把数据拍平，变为一维数组
* @param {*} data * @param {*} data
* @param {*} parentKey 标识父节点 * @param {*} parentKey 标识父节点
* @param {*} isShown 该节点是否显示在页面中，当节点的父节点是展开状态 或 该节点是根节点时，该值为 true
*/ */
@ -289966,21 +289959,25 @@
}, _initialiseProps = function _initialiseProps() { }, _initialiseProps = function _initialiseProps() {
var _this4 = this; var _this4 = this;
this.getTreeData = function () { this.getTreeData = function (expandedKeys) {
var startIndex = _this4.startIndex, var startIndex = _this4.startIndex,
endIndex = _this4.endIndex; endIndex = _this4.endIndex,
cacheExpandedKeys = _this4.cacheExpandedKeys;
var data = _this4.props.data; var data = _this4.props.data;
cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
var sliceTreeList = []; var sliceTreeList = [];
var flatTreeData = _this4.deepTraversal(data); var flatTreeData = _this4.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
_this4.flatTreeData = flatTreeData; _this4.flatTreeData = flatTreeData;
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
_this4.handleTreeListChange(sliceTreeList); _this4.handleTreeListChange(sliceTreeList);
cacheExpandedKeys = expandedKeys && null;
}; };
this.deepTraversal = function (treeData) { this.deepTraversal = function (treeData) {
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isShown = arguments[2];
var _this = _this4; var _this = _this4;
var cacheExpandedKeys = _this.cacheExpandedKeys, var cacheExpandedKeys = _this.cacheExpandedKeys,
@ -290005,18 +290002,16 @@
key: key, key: key,
isExpanded: isExpanded, isExpanded: isExpanded,
parentKey: parentKey, parentKey: parentKey,
isShown: isShown,
isLeaf: isLeaf, isLeaf: isLeaf,
index: flatTreeData.length index: flatTreeData.length
}, _extends({}, props)); }, _extends({}, props));
//该节点的父节点是展开状态 或 该节点是根节点
if (isShown || parentKey === null) { flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组 flatTreeKeysMap[key] = dataCopyI;
flatTreeKeysMap[key] = dataCopyI;
} // 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
if (Array.isArray(children) && children.length > 0) { if (Array.isArray(children) && children.length > 0 && isExpanded) {
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key, isExpanded));
} }
} }
} }

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

54
src/lib/bigData.js
View File

@ -64,36 +64,28 @@ export default function bigData(Table) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
} }
if (nextProps.data.toString() !== props.data.toString()) { if('data' in nextProps){
const isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data); const isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
_this.treeType = isTreeType; _this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun) //fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
_this.cachedRowHeight = []; //缓存每行的高度 if (nextProps.data.toString() !== props.data.toString()) {
_this.cachedRowParentIndex = []; _this.cachedRowHeight = []; //缓存每行的高度
_this.computeCachedRowParentIndex(nextProps.data); _this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
}
_this.treeData = []; _this.treeData = [];
_this.flatTreeData = []; _this.flatTreeData = [];
if(nextProps.data.length>0){ if(nextProps.data.length>0){
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
} }
if(isTreeType){ if(isTreeType){
_this.getTreeData(); _this.getTreeData(newExpandedKeys);
} }
} }
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex //如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if(currentIndex!==-1 && currentIndex !== this.currentIndex){ if(currentIndex!==-1 && currentIndex !== this.currentIndex){
_this.setStartAndEndIndex(currentIndex,dataLen); _this.setStartAndEndIndex(currentIndex,dataLen);
} }
if(newExpandedKeys !== props.expandedRowKeys){
_this.cacheExpandedKeys = new Set(newExpandedKeys);
//重新递归数据
let flatTreeData = _this.deepTraversal(data);
let sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
} }
componentWillMount() { componentWillMount() {
@ -110,24 +102,28 @@ export default function bigData(Table) {
/** /**
* 如果是树形表，需要对传入的 data 进行处理 * 如果是树形表，需要对传入的 data 进行处理
* @param expandedKeys: props 中传入的新 expandedRowKeys 属性值
*/ */
getTreeData = () => { getTreeData = (expandedKeys) => {
let { startIndex, endIndex } = this; let { startIndex, endIndex, cacheExpandedKeys } = this;
const { data } = this.props; const { data } = this.props;
cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
let sliceTreeList = []; let sliceTreeList = [];
let flatTreeData = this.deepTraversal(data); let flatTreeData = this.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
this.flatTreeData = flatTreeData; this.flatTreeData = flatTreeData;
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
this.handleTreeListChange(sliceTreeList); this.handleTreeListChange(sliceTreeList);
cacheExpandedKeys = expandedKeys && null;
} }
/** /**
* 深度遍历树形 data，把数据拍平，变为一维数组 * 深度遍历树形 data，把数据拍平，变为一维数组
* @param {*} data * @param {*} data
* @param {*} parentKey 标识父节点 * @param {*} parentKey 标识父节点
* @param {*} isShown 该节点是否显示在页面中，当节点的父节点是展开状态 或 该节点是根节点时，该值为 true
*/ */
deepTraversal = (treeData, parentKey=null, isShown) => { deepTraversal = (treeData, parentKey=null) => {
const _this = this; const _this = this;
let {cacheExpandedKeys, expandedRowKeys = [], flatTreeKeysMap} = _this, let {cacheExpandedKeys, expandedRowKeys = [], flatTreeKeysMap} = _this,
expandedKeysSet = cacheExpandedKeys ? cacheExpandedKeys : new Set(expandedRowKeys), expandedKeysSet = cacheExpandedKeys ? cacheExpandedKeys : new Set(expandedRowKeys),
@ -144,18 +140,16 @@ export default function bigData(Table) {
key, key,
isExpanded, isExpanded,
parentKey : parentKey, parentKey : parentKey,
isShown,
isLeaf, isLeaf,
index: flatTreeData.length index: flatTreeData.length
},{...props}); },{...props});
//该节点的父节点是展开状态 或 该节点是根节点
if(isShown || parentKey === null){ flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组 flatTreeKeysMap[key] = dataCopyI;
flatTreeKeysMap[key] = dataCopyI;
} // 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
if (Array.isArray(children) && children.length > 0){ if (Array.isArray(children) && children.length > 0 && isExpanded){
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children flatTreeData = flatTreeData.concat(this.deepTraversal(children, key));
flatTreeData = flatTreeData.concat(this.deepTraversal(children, key, isExpanded));
} }
} }
} }
@ -564,7 +558,7 @@ export default function bigData(Table) {
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length); lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
} }
// console.log('*******expandedRowKeys*****'+expandedRowKeys); // console.log('*******expandedRowKeys*****'+expandedRowKeys);
const dataSource = treeType && Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex); const dataSource = (treeType && Array.isArray(treeData) && treeData.length > 0) ? treeData : data.slice(startIndex, endIndex);
return ( return (
<Table <Table
{...this.props} {...this.props}