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

14
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';
} }
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) { 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.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,17 +642,16 @@ function bigData(Table) {
_this4.setState({ needRender: !needRender }); _this4.setState({ needRender: !needRender });
} }
} }
} if (_this4.treeType) {
//收起和展开时，缓存 expandedKeys
if (_this4.treeType) { _this.cacheExpandedKeys = expandedRowKeys;
//收起和展开时，缓存 expandedKeys //重新递归数据
_this.cacheExpandedKeys = expandedRowKeys; var flatTreeData = _this.deepTraversal(data);
//重新递归数据 var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
var flatTreeData = _this.deepTraversal(data); _this.flatTreeData = flatTreeData;
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex); _this.handleTreeListChange(sliceTreeList);
_this.flatTreeData = flatTreeData; _this.cacheExpandedKeys = null;
_this.handleTreeListChange(sliceTreeList); }
_this.cacheExpandedKeys = null;
} }
// expandState为true时，记录下 // expandState为true时，记录下

147
demo/demolist/Demo1404.js
View File

@ -5,94 +5,105 @@
* 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)=>{ * expandedRowKeys : 展开行的keys数组
console.log('expandedRowKeys',expandedRowKeys); */
} onExpandedRowsChange = (expandedRowKeys) => {
onExpand = (expandKeys)=>{ // console.log('expandedRowKeys', expandedRowKeys);
console.log('expand---'+expandKeys); this.setState({
} expandKeys:expandedRowKeys
handleClick = () => { })
this.setState({ }
data: data2 /**
}) * expanded : 当前的状态
} * record : 当前行的数据
render() { */
return ( onExpand = (expanded, record) => {
<div> console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);
<Button onClick={this.handleClick} colors="secondary" style={{marginBottom:'8px'}}>改变数据源</Button> }
<BigDataTable handleClick = () => {
columns={columns} this.setState({
data={this.state.data} data: data2
parentNodeId='parent' })
scroll={{y:300}} }
onExpand={this.onExpand} render () {
onRowClick={(record, index, indent) => { return (
console.log('currentIndex--'+index); <div>
}} <Button onClick={this.handleClick} colors="secondary" style={{ marginBottom: '8px' }}>改变数据源</Button>
onExpandedRowsChange={this.onExpandedRowsChange} <BigDataTable
/> columns={columns}
</div> 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; 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); 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';
} }
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) { 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.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;
}
} }
@ -496,7 +505,7 @@ export default function bigData(Table) {
if(expandState){ if(expandState){
expandedRowKeys.push(rowKey); expandedRowKeys.push(rowKey);
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
}else{ }else{
let index = -1; let index = -1;
expandedRowKeys.forEach((r, i) => { expandedRowKeys.forEach((r, i) => {
if (r === rowKey) { if (r === rowKey) {
@ -507,21 +516,20 @@ export default function bigData(Table) {
expandedRowKeys.splice(index, 1); expandedRowKeys.splice(index, 1);
this.setState({ needRender: !needRender }); 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) { // expandState为true时，记录下
//收起和展开时，缓存 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时，记录下
_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'}
/> />