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"
    />


  • 相关阅读:
    ie兼容,手机端兼容问题
    JS-cookie和正则表达式
    第六节蓝桥杯 方格填数
    最长公共子串长度
    上台阶问题
    各种好东西
    Painting the balls (dp优化)
    Nobita's New Filesystem (bitset)
    恐狼后卫 (区间dp)
    CF701F String set queries (分块思想+暴力)
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/11080960.html
Copyright © 2011-2022 走看看