zoukankan      html  css  js  c++  java
  • 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} />;
            });
        }
  • 相关阅读:
    根据出生日期来计算年龄
    tomcat 7 7.0.73 url 参数 大括号 {} 不支持 , 7.0.67支持
    hdu 1272(并查集)
    hdu 1558(计算几何+并查集)
    hdu 1856(hash+启发式并查集)
    hdu 1598(最小生成树)
    poj 3164(最小树形图模板)
    hdu 2489(状态压缩+最小生成树)
    hdu 3371(启发式合并的最小生成树)
    hdu 1301(最小生成树)
  • 原文地址:https://www.cnblogs.com/huhanhaha/p/7693011.html
Copyright © 2011-2022 走看看