tree
tree copied to clipboard
Support only load select node-data
Can support only load user-select node-data.
my tree
(<Tree
// defaultExpandedKeys={['0-0']}
loadData={async (treeNode)=> this.loadData(treeNode)}
treeData={this.state.treeData}
/>);
I must update whole this.state.treeData when trigger loadData,
loop list of treeData will cost long time,
so i want a mode that can only load need-load-data and get whole data by something such as tree-ref,
I don't find anything about this with doc.
Is supporting ?
and I found another issue with custom data-model
my data-model
interface TreeNode{
key: string,
title: string,
isLeaf?: boolean,
children?: TreeNode[]
}
class TreeDataCacheHelper {
protected _initData: TreeNode[] = []
protected keyNodeMap: {[key: string]: TreeNode} = {}
protected initNodeMap(data: TreeNode[]){
for (const one of data) {
this.keyNodeMap[one.key] = one
if (one.children) this.initNodeMap(one.children)
}
}
constructor(data: TreeNode[]) {
this.reInitData(data)
}
reInitData(data: TreeNode[]) {
this._initData = data
this.initNodeMap(this._initData)
}
get value(): TreeNode[]{
return this._initData
}
setChildByKey(key: string | any, value: TreeNode[]) {
const t = this.keyNodeMap?.[key]
if (t) {
t.children = value
this.initNodeMap(t.children)
} else {
console.log(`not find tree for ${key}`)
}
}
}
init the model with tree-init-data, as protected proxyData = new TreeDataCacheHelper(initData).
how Tree use
state = {
treeData: this.proxyData.value
}
render() {
return (<Tree
// defaultExpandedKeys={['0-0']}
loadData={async (treeNode)=> this.loadData(treeNode)}
// must deep copy, or no-indent . 必须深拷贝, 否则丢失缩进状态
treeData={[...this.state.treeData]}
/>);
}
treeData must be a deep copy after new-loadData, or Child nodes lose indentation , I don't know is it a bug?
my load data fun
protected loadData(treeNode: EventDataNode<DataNode>){
console.log("load data", treeNode)
const startKey = treeNode.key
const ret = []
let i = 0
while (i < 3){
ret.push({
key: startKey+`-${i}`,
isLeaf: false,
title: `This is the title for ${startKey}-${i}`,
})
i += 1
}
this.proxyData.setChildByKey(treeNode.key, ret)
this.setState({treeData: this.proxyData.value})
// return ret
}