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

解决层级树大数据场景，动态改变data时，数据未同步的问题

This commit is contained in:
yangchch6 2019-09-11 21:08:18 +08:00
parent 4eab282716
commit 7f93dc5683
8 changed files with 180 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/Table.js
View File

@ -827,7 +827,6 @@ var Table = function (_Component) {
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
var rst = [];
var height = void 0;
var rowClassName = props.rowClassName;
var rowRef = props.rowRef;
@ -976,6 +975,7 @@ var Table = function (_Component) {
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
}
if (childrenColumn) {
this.isTreeType = true; //增加该标志位，为了兼容老版本，不修改以前的 `this.treeType` 的相关逻辑
this.treeType = true; //证明是tree表形式visible = {true}
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
}
@ -984,12 +984,17 @@ var Table = function (_Component) {
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
}
if (!this.isTreeType) {
this.treeType = false;
}
return rst;
};
Table.prototype.getRows = function getRows(columns, fixed) {
//统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
this.treeRowIndex = 0;
//每次遍历 data 前，将this.isTreeType置为 false，若遍历完 data，此变量仍为 false，说明是普通表格
this.isTreeType = false;
var rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
return rs;
};

61
build/lib/bigData.js
View File

@ -91,13 +91,20 @@ function bigData(Table) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
}
if (nextProps.data.toString() !== props.data.toString()) {
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
_this.treeData = [];
_this.flatTreeData = [];
if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
}
if (isTreeType) {
_this.getTreeData();
}
}
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
@ -106,10 +113,6 @@ function bigData(Table) {
};
BigData.prototype.componentWillMount = function componentWillMount() {
var endIndex = this.endIndex,
startIndex = this.startIndex;
var sliceTreeList = [];
var _props = this.props,
data = _props.data,
isTree = _props.isTree;
@ -120,13 +123,15 @@ function bigData(Table) {
//如果是树表，递归data
if (isTreeType) {
this.treeType = isTreeType;
var flatTreeData = this.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
this.flatTreeData = flatTreeData;
this.handleTreeListChange(sliceTreeList);
this.getTreeData();
}
};
/**
* 如果是树形表，需要对传入的 data 进行处理
*/
/**
* 深度遍历树形 data，把数据拍平，变为一维数组
* @param {*} data
@ -187,9 +192,8 @@ function bigData(Table) {
*/
BigData.prototype.checkIsTreeType = function checkIsTreeType() {
var data = this.props.data;
BigData.prototype.checkIsTreeType = function checkIsTreeType(newData) {
var data = newData ? newData : this.props.data;
var rs = false;
var len = data.length > 30 ? 30 : data.length;
//取前三十个看看是否有children属性，有则为树形结构
@ -330,26 +334,6 @@ function bigData(Table) {
startParentIndex: startIndex //为树状节点做准备
};
if (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;
// }
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
lazyLoad.sufHeight = this.getSumHeight(endIndex, flatTreeData.length);
} else {
@ -357,8 +341,9 @@ function bigData(Table) {
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
}
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
var dataSource = treeType && Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex);
return _react2["default"].createElement(Table, _extends({}, this.props, {
data: Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex),
data: dataSource,
lazyLoad: lazyLoad,
handleScrollY: this.handleScrollY,
scrollTop: scrollTop,
@ -386,6 +371,18 @@ function bigData(Table) {
}, _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.getTreeData = function () {
var startIndex = _this4.startIndex,
endIndex = _this4.endIndex;
var data = _this4.props.data;
var sliceTreeList = [];
var flatTreeData = _this4.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
_this4.flatTreeData = flatTreeData;
_this4.handleTreeListChange(sliceTreeList);
};
this.deepTraversal = function (treeData) {
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isShown = arguments[2];

81
demo/demolist/Demo1404.js
View File

@ -5,7 +5,7 @@
* demo1404
*/
import React, { Component } from "react";
import {Tooltip} from "tinper-bee";
import {Button} from "tinper-bee";
import Table from "../../src";
import BigData from "../../src/lib/bigData";
@ -17,52 +17,42 @@ const columns = [
width:'150',
key:'index',
render:(text,record,index)=>{
//树形表格，可取 record.index 作为序号索引值
return record.index
return record.index ? record.index : index
}
},
{
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "block",
width: "40px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "bottom",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
{title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName"},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
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`});
rs.children[subi].children = []
for(let subj=0;subj<100;subj++){
rs.children[subi].children.push({a: 333+' '+subj, b: 333+' '+subj, c: 333+' '+subj, d: 333+' '+subj, key: i+ `${subj} sub1`});
}
}
}else{
const data = [ ...new Array(10) ].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`});
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`});
rs.children[subi].children = []
for(let subj=0;subj<100;subj++){
rs.children[subi].children.push({a: 333+' '+subj, b: 333+' '+subj, c: 333+' '+subj, d: 333+' '+subj, key: i+ `${subj} sub1`});
}
}
return rs;
})
}
}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;
})
const data2 = [ ...new Array(10000) ].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 = '女';
}
return rs;
})
class Demo34 extends Component {
@ -79,11 +69,18 @@ class Demo34 extends Component {
onExpand = (expandKeys)=>{
console.log('expand---'+expandKeys);
}
handleClick = () => {
this.setState({
data: data2
})
}
render() {
return (
<div>
<Button onClick={this.handleClick} colors="secondary" style={{marginBottom:'8px'}}>改变数据源</Button>
<BigDataTable
columns={columns}
data={data}
data={this.state.data}
parentNodeId='parent'
scroll={{y:300}}
onExpand={this.onExpand}
@ -92,7 +89,7 @@ class Demo34 extends Component {
}}
onExpandedRowsChange={this.onExpandedRowsChange}
/>
</div>
);
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

142
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
src/Table.js
View File

@ -670,7 +670,6 @@ class Table extends Component {
const expandRowByClick = props.expandRowByClick;
const { fixedColumnsBodyRowsHeight } = this.state;
let rst = [];
let height;
const rowClassName = props.rowClassName;
const rowRef = props.rowRef;
@ -825,6 +824,7 @@ class Table extends Component {
));
}
if (childrenColumn) {
this.isTreeType = true; //增加该标志位，为了兼容老版本，不修改以前的 `this.treeType` 的相关逻辑
this.treeType = true;//证明是tree表形式visible = {true}
rst = rst.concat(this.getRowsByData(
childrenColumn, subVisible, indent + 1, columns, fixed,paramRootIndex
@ -837,12 +837,17 @@ class Table extends Component {
<TableRow height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
)
}
if (!this.isTreeType) {
this.treeType = false;
}
return rst;
}
getRows(columns, fixed) {
//统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
this.treeRowIndex = 0;
//每次遍历 data 前，将this.isTreeType置为 false，若遍历完 data，此变量仍为 false，说明是普通表格
this.isTreeType = false;
let rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
return rs;
}

54
src/lib/bigData.js
View File

@ -65,13 +65,20 @@ export default function bigData(Table) {
}
if (nextProps.data.toString() !== props.data.toString()) {
const isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(nextProps.data);
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(nextProps.data);
_this.treeData = [];
_this.flatTreeData = [];
if(nextProps.data.length>0){
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
}
if(isTreeType){
_this.getTreeData();
}
}
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
@ -81,8 +88,6 @@ export default function bigData(Table) {
}
componentWillMount() {
let { endIndex, startIndex } = this;
let sliceTreeList = [];
const { data,isTree } = this.props;
const isTreeType = isTree?true:this.checkIsTreeType();
//设置data中每个元素的parentIndex
@ -90,13 +95,23 @@ export default function bigData(Table) {
//如果是树表，递归data
if(isTreeType){
this.treeType = isTreeType;
let flatTreeData = this.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
this.flatTreeData = flatTreeData;
this.handleTreeListChange(sliceTreeList);
this.getTreeData();
}
}
/**
* 如果是树形表，需要对传入的 data 进行处理
*/
getTreeData = () => {
let { startIndex, endIndex } = this;
const { data } = this.props;
let sliceTreeList = [];
let flatTreeData = this.deepTraversal(data);
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
this.flatTreeData = flatTreeData;
this.handleTreeListChange(sliceTreeList);
}
/**
* 深度遍历树形 data，把数据拍平，变为一维数组
* @param {*} data
@ -218,8 +233,8 @@ export default function bigData(Table) {
*判断是否是树形结构
*
*/
checkIsTreeType() {
const { data } = this.props;
checkIsTreeType(newData) {
const data = newData ? newData : this.props.data;
let rs = false;
const len = data.length > 30 ? 30 : data.length;
//取前三十个看看是否有children属性，有则为树形结构
@ -531,26 +546,6 @@ export default function bigData(Table) {
startParentIndex: startIndex //为树状节点做准备
};
if (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;
// }
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
lazyLoad.sufHeight = this.getSumHeight(endIndex, flatTreeData.length);
} else {
@ -558,10 +553,11 @@ export default function bigData(Table) {
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
}
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
const dataSource = treeType && Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex);
return (
<Table
{...this.props}
data={Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex)}
data={dataSource}
lazyLoad={lazyLoad}
handleScrollY={this.handleScrollY}
scrollTop={scrollTop}