后台返回平铺数据,如何转换成树形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"
/>
后台返回平铺数据,如何转换成树形json并渲染树形结构,ant tree 异步加载的更多相关文章
- MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
- 利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model
利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model 使用场景:网站配置项目,为了便于管理,网站有几个Model类来管理配置文件, 比如ConfigWebsiteMo ...
- iOS 用webView加载后台返回的HTML数据
返回数据: <p><b>\U516c\U53f8\U7b80\U4ecb</b></p><p> \U5584\U76c8\U7ba1\ ...
- java中,字符串类型的时间数据怎样转换成date类型。
将字符串类型的时间转换成date类型可以使用SimpleDateFormat来转换,具体方法如下:1.定义一个字符串类型的时间:2.创建一个SimpleDateFormat对象并设置格式:3.最后使用 ...
- 使用Sql语句快速将数据表转换成实体类
开发过程中经常需要根据数据表编写对应的实体类,下面是使用sql语句快速将数据表转换成对应实体类的代码,使用时只需要将第一行'TableName'引号里面的字母换成具体的表名称就行了: declare ...
- 获取minist数据并转换成lmdb
caffe本身是没有数据集的,但在data目录下有获取数据的一些脚本.MNIST,一个经典的手写数字库,包含60000个训练样本和10000个测试样本,每个样本为28*28大小的黑白图片,手写数字为0 ...
- 数据表转换成json(DatatableToJson)
#region 转换Table为JSON数据 /// <summary> /// 转换Table为JSON数据 /// </summary> /// <param nam ...
- 【Spring Boot】Spring Boot之利用Logstash将日志转换成以JSON的格式存储和输出
一.Logstash的作用 Logstash是一个完全开源的工具,它可以对日志进行收集.过滤,能非常方便地将日志转换成以JSON的格式存储和输出,并将其存储供以后使用. 二.整合Logstash的步骤 ...
- Android学习笔记_36_ListView数据异步加载与AsyncTask
一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...
随机推荐
- vue中循环时动态绑定值
在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...
- JavaScript 基础 (变量声明, 数据类型, 控制语句)
创建: 2017/09/16 更新: 2017/09/24 更改标题 [JavaScript 概要]-> [JavaScript 基础] 完成: 2017/09/25 更新: 2017/10/0 ...
- lightoj 1096【矩阵快速幂(作为以后的模板)】
基础矩阵快速幂何必看题解 #include <bits/stdc++.h> using namespace std; /* 0 1 2 3 4 5 6 7 0 0 0 */ const i ...
- 51nod1402(贪心)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1402 题意:中文题诶- 思路:贪心 对于一个桩点,如果我们只考 ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- 17.TLB
我们只想读4个字节,但我们要经过如下的步骤 读取 字节的PDE 读取 字节的 PTE 读取 字节(int 占用4字节)的物理内存 在 10-10-12 分页模式下,CPU 每次要访问额外的访问 8 字 ...
- sql 规范
https://www.cnblogs.com/jacktang/archive/2012/09/25/2701301.html http://blog.csdn.net/ethan_fu/artic ...
- qq登录,新浪微博登录接口申请过程中遇到的问题
接口申请下来了,开发很容易的,参数传到就可以了.以前就做过这方面的开发,但是申请还是第一次,网上有关这方面的东东不是很多,所以记录一下申请过程. 1,qq登录接口申请 申请地址是:http://con ...
- HashMap之put方法流程解读
说明:本文中所谈论的HashMap基于JDK 1.8版本源码进行分析和说明. HashMap的put方法算是HashMap中比较核心的功能了,复杂程度高但是算法巧妙,同时在上一版本的基础之上优化了存储 ...
- Json的详细用法
参考博客:https://www.cnblogs.com/haiyan123/p/7829080.html 1.json(Javascript Obiect Notation,JS对象标记)是一种 ...