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} />;
            });
        }
  • 相关阅读:
    request和response概念用法
    servlet知识点
    Nginx的安装和配置文件详细说明
    Tomcat优化
    Tomcat安装和常见问题
    WEB服务器和tomcat介绍
    WEB技术相关入门知识点
    前期绑定和后期绑定
    1-4选择题
    1-3选择题
  • 原文地址:https://www.cnblogs.com/huhanhaha/p/7693011.html
Copyright © 2011-2022 走看看