JSコードは、再帰的ツリーデータ配列変換です。

コードを貼り付けます。

// Grid-》Tree 结构组装。
var tree = [];
this.setTreeData(table, tree, "");
//组装树形
     setTreeData = (source, list, pid) => {
        if (typeof (source) == "undefined") return;
        source.forEach((father) => {
            if (father.PID == pid) {
                list.push(father);
                if (!father.IsLowest) {
                    if (typeof (father.children) == "undefined") {
                        father.children = [];
                    }
                    father.children = this.setTreeData(source, father.children, father.ContractListDtlID);
                }
            }


//Tree -> 数组机构
//树形数据转换成grid,调用者自己决定children 属性删除与否 2019-
     
var list= [];
this.setGridDataFromTree(list, tree, "");

setGridDataFromTree= function(list,dataSource){
        if (!(Array.isArray(dataSource) && dataSource.length >0)) return ;            
        dataSource.forEach((father) => {
            // debugger;
            list.push(father);            
            if (typeof (father.children) == "undefined") {                
            } else {                
                this.setGridDataFromTree(list, father.children);
            }
        });
        // return;
    }
        })
        return list;
    }

 コンテンツを使用するために、コード開発プロジェクトの上に反応します。
、変換とGirdツリー構造は、参照が割り当てられることに留意されたいです。それは変更に影響を与えるだろうgirdまたはtreeData値後に変更しました。
あなたは深いコピー後に移し、それを必要としません。
「GridData操作-利点浅いコピーは、ストレージ・インターフェースの変更treeData gridDataがTreeDataを低減することが可能になった後の参照特性値を使用することです。
もちろん、コントロール自体は、表示画面のリフレッシュを行うために、追加のそのような判断を必要とします。

 shouldComponentUpdate(newProps, newState) {
        if (newProps.tableData !== this.props.tableData 
            || JSON.stringify(newProps.tableData) !== JSON.stringify(this.props.tableData)) {
            this.loadData(newProps);
     
        }
        // debugger;
        return true;
    }

おすすめ

転載: www.cnblogs.com/hijushen/p/11103995.html