Skip to content

Support only load select node-data #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yanquer opened this issue Jul 26, 2024 · 1 comment
Open

Support only load select node-data #854

yanquer opened this issue Jul 26, 2024 · 1 comment

Comments

@yanquer
Copy link

yanquer commented Jul 26, 2024

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
Copy link
Author

yanquer commented Jul 26, 2024

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
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant