JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests 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

12
build/Table.js
View File

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

19
build/lib/bigData.js
View File

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

69
demo/demolist/Demo1404.js
View File

@ -5,89 +5,100 @@
* demo1404 * demo1404
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import {Button} from "tinper-bee"; import { Button } from "tinper-bee";
import Table from "../../src"; import Table from "../../src";
import BigData from "../../src/lib/bigData"; import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table); const BigDataTable = BigData(Table);
const columns = [ const columns = [
{ {
title:'序号', title: '序号',
dataIndex:'index', dataIndex: 'index',
width:'150', width: '150',
key:'index', key: 'index',
render:(text,record,index)=>{ render: (text, record, index) => {
return record.index ? record.index : index return record.index ? record.index : index
} }
}, },
{title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName"}, { title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName" },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80}, { id: "123", title: "性别", dataIndex: "b", key: "b", width: 80 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 } { title: "年龄", dataIndex: "c", key: "c", width: 200 }
]; ];
const data = [ ...new Array(10) ].map((e, i) => { const data = [...new Array(10)].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i }; const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){ if (i % 3 == 0) {
rs.b = '女'; rs.b = '女';
rs.children = []; rs.children = [];
for(let subi=0;subi<3;subi++){ 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.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 = [] rs.children[subi].children = []
for(let subj=0;subj<100;subj++){ 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`}); rs.children[subi].children.push({ a: 333 + ' ' + subj, b: 333 + ' ' + subj, c: 333 + ' ' + subj, d: 333 + ' ' + subj, key: i + `${subj} sub1` });
} }
} }
}else{ } else {
rs.children = []; rs.children = [];
for(let subi=0;subi<3;subi++){ 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.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });
} }
} }
return rs; return rs;
}) })
const data2 = [ ...new Array(10000) ].map((e, i) => { const data2 = [...new Array(10000)].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i }; const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){ if (i % 3 == 0) {
rs.b = '女'; rs.b = '女';
} }
return rs; return rs;
}) })
class Demo34 extends Component { class Demo34 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: data, data: data,
selectedRowIndex: 0 selectedRowIndex: 0,
expandKeys: [0]
} }
} }
onExpandedRowsChange = (expandedRowKeys)=>{ /**
console.log('expandedRowKeys',expandedRowKeys); * expandedRowKeys : 展开行的keys数组
*/
onExpandedRowsChange = (expandedRowKeys) => {
// console.log('expandedRowKeys', expandedRowKeys);
this.setState({
expandKeys:expandedRowKeys
})
} }
onExpand = (expandKeys)=>{ /**
console.log('expand---'+expandKeys); * expanded : 当前的状态
* record : 当前行的数据
*/
onExpand = (expanded, record) => {
console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);
} }
handleClick = () => { handleClick = () => {
this.setState({ this.setState({
data: data2 data: data2
}) })
} }
render() { render () {
return ( return (
<div> <div>
<Button onClick={this.handleClick} colors="secondary" style={{marginBottom:'8px'}}>改变数据源</Button> <Button onClick={this.handleClick} colors="secondary" style={{ marginBottom: '8px' }}>改变数据源</Button>
<BigDataTable <BigDataTable
columns={columns} columns={columns}
data={this.state.data} data={this.state.data}
parentNodeId='parent' parentNodeId='parent'
scroll={{y:300}} scroll={{ y: 300 }}
onExpand={this.onExpand} onExpand={this.onExpand}
onRowClick={(record, index, indent) => { onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index); console.log('currentIndex--' + index);
}} }}
onExpandedRowsChange={this.onExpandedRowsChange} onExpandedRowsChange={this.onExpandedRowsChange}
expandedRowKeys={this.state.expandKeys}
/> />
</div> </div>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

57
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

12
src/Table.js
View File

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

18
src/lib/bigData.js
View File

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