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

fix:懒加载的树状表，在传了expandedRowKeys属性后，会导致点击+号无法展开的问题

This commit is contained in:
yangchch6 2019-11-06 15:03:26 +08:00
parent 538cb33c8e
commit b3ad1ed5bf
8 changed files with 278 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
build/Table.js
View File

@ -529,7 +529,7 @@ var Table = function (_Component) {
}
var info = this.findExpandedRow(record);
if (typeof info !== 'undefined' && !expanded) {
this.onRowDestroy(record, index);
this.onRowDestroy(record, index, true);
} else if (!info && expanded) {
var expandedRows = this.getExpandedRows().concat();
expandedRows.push(this.getRowKey(record, index));
@ -538,7 +538,7 @@ var Table = function (_Component) {
this.props.onExpand(expanded, record, index);
};
Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex) {
Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex, isExpandOperation) {
var expandedRows = this.getExpandedRows().concat();
var rowKey = this.getRowKey(record, rowIndex);
var index = -1;
@ -554,7 +554,15 @@ var Table = function (_Component) {
if (this.currentHoverKey == rowKey && this.hoverDom) {
this.hoverDom.style.display = 'none';
}
this.onExpandedRowsChange(expandedRows);
// todo:如果是TableRow组件卸载触发的该方法，需要加判断，解决懒加载时，持续触发onExpandedRowsChange的问题
if (isExpandOperation) {
this.onExpandedRowsChange(expandedRows);
} else {
var info = this.findExpandedRow(record);
if (typeof info === 'undefined') {
this.onExpandedRowsChange(expandedRows);
}
}
};
Table.prototype.getRowKey = function getRowKey(record, index) {

37
build/lib/bigData.js
View File

@ -67,7 +67,7 @@ function bigData(Table) {
_this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
_this2.setRowHeight = _this2.setRowHeight.bind(_this2);
_this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2);
_this2.expandedRowKeys = [];
_this2.expandedRowKeys = props.expandedRowKeys || [];
_this2.flatTreeKeysMap = {}; //树表，扁平结构数据的 Map 映射，方便获取各节点信息
_this2.flatTreeData = []; //深度遍历处理后的data数组
_this2.treeData = []; //树表的data数据
@ -77,7 +77,8 @@ function bigData(Table) {
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var props = this.props;
var currentIndex = nextProps.currentIndex,
data = nextProps.data;
data = nextProps.data,
newExpandedKeys = nextProps.expandedRowKeys;
var _this = this,
dataLen = data.length;
@ -110,6 +111,15 @@ function bigData(Table) {
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
_this.setStartAndEndIndex(currentIndex, dataLen);
}
if (newExpandedKeys !== props.expandedRowKeys) {
_this.cacheExpandedKeys = 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() {
@ -350,7 +360,7 @@ function bigData(Table) {
setRowHeight: this.setRowHeight,
setRowParentIndex: this.setRowParentIndex,
onExpand: this.onExpand,
onExpandedRowsChange: this.onExpandedRowsChange,
onExpandedRowsChange: this.props.onExpandedRowsChange,
expandedRowKeys: expandedRowKeys
// className={'lazy-table'}
}));
@ -632,17 +642,16 @@ function bigData(Table) {
_this4.setState({ needRender: !needRender });
}
}
}
if (_this4.treeType) {
//收起和展开时，缓存 expandedKeys
_this.cacheExpandedKeys = expandedRowKeys;
//重新递归数据
var flatTreeData = _this.deepTraversal(data);
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
if (_this4.treeType) {
//收起和展开时，缓存 expandedKeys
_this.cacheExpandedKeys = expandedRowKeys;
//重新递归数据
var flatTreeData = _this.deepTraversal(data);
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
}
// expandState为true时，记录下

147
demo/demolist/Demo1404.js
View File

@ -5,94 +5,105 @@
* demo1404
*/
import React, { Component } from "react";
import {Button} from "tinper-bee";
import { Button } from "tinper-bee";
import Table from "../../src";
import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table);
const columns = [
{
title:'序号',
dataIndex:'index',
width:'150',
key:'index',
render:(text,record,index)=>{
title: '序号',
dataIndex: 'index',
width: '150',
key: 'index',
render: (text, record, index) => {
return record.index ? record.index : index
}
},
{title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName"},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ 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(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`});
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`});
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` });
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{
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;
} 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;
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 {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0,
expandKeys: [0]
}
}
}
onExpandedRowsChange = (expandedRowKeys)=>{
console.log('expandedRowKeys',expandedRowKeys);
}
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={this.state.data}
parentNodeId='parent'
scroll={{y:300}}
onExpand={this.onExpand}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}
onExpandedRowsChange={this.onExpandedRowsChange}
/>
</div>
/**
* expandedRowKeys : 展开行的keys数组
*/
onExpandedRowsChange = (expandedRowKeys) => {
// console.log('expandedRowKeys', expandedRowKeys);
this.setState({
expandKeys:expandedRowKeys
})
}
/**
* expanded : 当前的状态
* record : 当前行的数据
*/
onExpand = (expanded, record) => {
console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);
}
handleClick = () => {
this.setState({
data: data2
})
}
render () {
return (
<div>
<Button onClick={this.handleClick} colors="secondary" style={{ marginBottom: '8px' }}>改变数据源</Button>
<BigDataTable
columns={columns}
data={this.state.data}
parentNodeId='parent'
scroll={{ y: 300 }}
onExpand={this.onExpand}
onRowClick={(record, index, indent) => {
console.log('currentIndex--' + index);
}}
onExpandedRowsChange={this.onExpandedRowsChange}
expandedRowKeys={this.state.expandKeys}
/>
</div>
);
}
);
}
}
export default Demo34;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

221
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

14
src/Table.js
View File

@ -364,7 +364,7 @@ class Table extends Component {
}
const info = this.findExpandedRow(record);
if (typeof info !== 'undefined' && !expanded) {
this.onRowDestroy(record, index);
this.onRowDestroy(record, index, true);
} else if (!info && expanded) {
const expandedRows = this.getExpandedRows().concat();
expandedRows.push(this.getRowKey(record, index));
@ -373,7 +373,7 @@ class Table extends Component {
this.props.onExpand(expanded, record,index);
}
onRowDestroy(record, rowIndex) {
onRowDestroy(record, rowIndex, isExpandOperation) {
const expandedRows = this.getExpandedRows().concat();
const rowKey = this.getRowKey(record, rowIndex);
let index = -1;
@ -389,7 +389,15 @@ class Table extends Component {
if(this.currentHoverKey == rowKey && this.hoverDom){
this.hoverDom.style.display = 'none';
}
this.onExpandedRowsChange(expandedRows);
// todo:如果是TableRow组件卸载触发的该方法，需要加判断，解决懒加载时，持续触发onExpandedRowsChange的问题
if(isExpandOperation){
this.onExpandedRowsChange(expandedRows);
} else {
const info = this.findExpandedRow(record);
if(typeof info === 'undefined'){
this.onExpandedRowsChange(expandedRows);
}
}
}
getRowKey(record, index) {

42
src/lib/bigData.js
View File

@ -43,14 +43,14 @@ export default function bigData(Table) {
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
this.setRowHeight = this.setRowHeight.bind(this);
this.setRowParentIndex = this.setRowParentIndex.bind(this);
this.expandedRowKeys = [];
this.expandedRowKeys = props.expandedRowKeys || [];
this.flatTreeKeysMap = {}; //树表，扁平结构数据的 Map 映射，方便获取各节点信息
this.flatTreeData = []; //深度遍历处理后的data数组
this.treeData = []; //树表的data数据
}
componentWillReceiveProps(nextProps) {
const props = this.props;
const {currentIndex ,data} = nextProps;
const {currentIndex ,data, expandedRowKeys:newExpandedKeys} = nextProps;
const _this = this,dataLen = data.length;
if (nextProps.scroll.y !== props.scroll.y) {
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
@ -84,6 +84,15 @@ export default function bigData(Table) {
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
_this.setStartAndEndIndex(currentIndex,dataLen);
}
if(newExpandedKeys !== props.expandedRowKeys){
_this.cacheExpandedKeys = newExpandedKeys;
//重新递归数据
let flatTreeData = _this.deepTraversal(data);
let sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
}
@ -496,7 +505,7 @@ export default function bigData(Table) {
if(expandState){
expandedRowKeys.push(rowKey);
this.setState({ needRender: !needRender });
}else{
}else{
let index = -1;
expandedRowKeys.forEach((r, i) => {
if (r === rowKey) {
@ -507,21 +516,20 @@ export default function bigData(Table) {
expandedRowKeys.splice(index, 1);
this.setState({ needRender: !needRender });
}
}
}
if(this.treeType) {
//收起和展开时，缓存 expandedKeys
_this.cacheExpandedKeys = expandedRowKeys;
//重新递归数据
let flatTreeData = _this.deepTraversal(data);
let sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
}
if(this.treeType) {
//收起和展开时，缓存 expandedKeys
_this.cacheExpandedKeys = expandedRowKeys;
//重新递归数据
let flatTreeData = _this.deepTraversal(data);
let sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
_this.flatTreeData = flatTreeData;
_this.handleTreeListChange(sliceTreeList);
_this.cacheExpandedKeys = null;
}
// expandState为true时，记录下
// expandState为true时，记录下
_this.props.onExpand(expandState, record);
};
@ -564,7 +572,7 @@ export default function bigData(Table) {
setRowHeight={this.setRowHeight}
setRowParentIndex={this.setRowParentIndex}
onExpand={this.onExpand}
onExpandedRowsChange={this.onExpandedRowsChange}
onExpandedRowsChange={this.props.onExpandedRowsChange}
expandedRowKeys={expandedRowKeys}
// className={'lazy-table'}
/>