• 后台返回平铺数据,如何转换成树形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"
    />


  • 相关阅读:
    Microsoft.NET User Group
    白话MVP 和 MVVM 【转】
    高效的二分法TOP MAX/TOP MIN分页存贮过程
    策略模式5
    说说我们项目组的例行会议
    合格的项目经理
    说说我们的招聘和面试
    web安全问题汇总
    ASP.NET中常用的优化性能方法
    说说我们安排的培训
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/11080960.html
Copyright © 2020-2023  润新知