zoukankan      html  css  js  c++  java
  • 后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载

    如何后台返回对象数组(平铺式)

    1、根据字段标识(板块)获取根节点

    ### 

    initTreeData(dataOrg){
    var resultArr=dataOrg[0]
    var secArr=[];
    for(var i=0;i<dataOrg.length;i++){
    if(dataOrg[i].orgLevelName=='板块'){
    dataOrg[i].title=dataOrg[i].orgName
    dataOrg[i].key=dataOrg[i].orgId
    dataOrg[i].children=[];
    secArr.push(dataOrg[i])
    }
    }
    resultArr.title="企业名称"
    resultArr.key="109887"
    resultArr.children=secArr
    return resultArr
    },


    2、点击根节点获取对应的子节点数组并渲染树形结构

    代码如下:
    onLoadData (treeNode) {
    let _self=this;
    return new Promise((resolve) => {
    if(treeNode.dataRef.children){
    if (treeNode.dataRef.children.length>0) {
    resolve()
    return
    }
    }
    var nextNode = _self.getUnitByOrgId(treeNode.eventKey,window.dataOrg)
    setTimeout(() => {
    treeNode.dataRef.children = nextNode
    this.treeDataQy = [...this.treeDataQy]
    resolve()
    }, 1000)
    })
    },

    3、根据根id获取子节点数组
    getUnitByOrgId(orgId,dataOrg){
    let allObj=[]
    var dataOrg=dataOrg
    for (var i = 0; i < dataOrg.length; i++) {
    if (dataOrg[i].orgLevelName == '单位') {
    if (dataOrg[i].parentId == orgId) {
    dataOrg[i].title = dataOrg[i].orgName
    dataOrg[i].key = dataOrg[i].orgId
    allObj.push(dataOrg[i])
    }
    }
    }
    return allObj
    },


    4、ant design 树形结构html代码
    <a-tree
    checkable
    @expand="onExpandQy"
    v-model="checkedKeysQy"
    @select="onSelectQy"
    :selectedKeys="selectedKeysQy"
    :treeData="treeDataQy"
    :loadData="onLoadData"
    />


  • 相关阅读:
    js 函数 常用事件 document事件 window对象
    Java API Object
    Java 匿名对象 内部类 包的声明与访问 访问修饰符
    Java关键字 this super final static
    Java 多态 构造方法
    Java 抽象类 接口
    Java Server Pages----JSP
    JAVA Web -----Servlet简介
    JAVA web 会话技术Cookie&Session
    JAVA中常用的API -----(一)Object、String类
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/11080960.html
Copyright © 2011-2022 走看看