antd异步加载的树

1.antd异步加载的使用方法:

<Tree
     checkable                 //加入checkbook
     checkStrictly            //父子节点是否关注
     onCheck={onCheck}       //点击事件
     loadData={this.onLoadData1}//这是很关键的一部调用异步加载
     checkedKeys={defaultTreeData}
 >
     <TreeNode title={'★' + '所有分类'} key="00">
           {this.renderTreeNodes(getTreeData)}
     </TreeNode>
</Tree>                            

2.这个时候回去触发onLoadData1:

onLoadData1 = (treeNode) => {
        //console.log(treeNode)
        return new Promise((resolve) => {
            if (treeNode.props.children) {
                resolve();
                return;
            }
            KbService.request(config.host + '/kbmain/getKnowledgeIndexByPid' //这里是在components里面直接调取数据,这里必须就在components取数据才行
            ,{"parent_id":treeNode.props.dataRef.cls_id}).done((data) => {
                treeNode.props.dataRef.children = data;
                let list = this.state.getTreeData;
                list.concat(data)
                this.setState({
                    getTreeData: list
                });
                resolve();
            });
        });
    }

 3.对异步加载出来的数据进行处理:

renderTreeNodes = (data) => {
        return data.map((item) => {
            const isLeaf = false
            if (item.children) {
                //console.log('item.children----->',item.children)
                return (
                    <TreeNode title={item.cls_name} key={item.cls_id} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            //console.log("222222222222222")
            return <TreeNode title={item.cls_name} key={item.cls_id} dataRef={item} isLeaf={item.isLeaf == 1 ? true : false} />;
        });
    }

 

posted @ 2017-10-19 16:01  SANKE_3G  阅读(11127)  评论(1编辑  收藏  举报