tree icon indicating copy to clipboard operation
tree copied to clipboard

Support only load select node-data

Open yanquer opened this issue 1 year ago • 1 comments

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 ?

yanquer avatar Jul 26 '24 02:07 yanquer

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
    }

yanquer avatar Jul 26 '24 02:07 yanquer