后台返回平铺数据,如何转换成树形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 ...
随机推荐
- Java文件输入输出
public static void FileIO(String filename){ FileInputStream fis = null; try { fis = new FileInputStr ...
- NITACMOJ144稳定串
点我>>题目链接 稳定串 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java ...
- bzoj3771: Triple(容斥+生成函数+FFT)
传送门 咳咳忘了容斥了-- 设\(A(x)\)为斧头的生成函数,其中第\(x^i\)项的系数为价值为\(i\)的斧头个数,那么\(A(x)+A^2(x)+A^3(x)\)就是答案(于是信心满满的打了一 ...
- 日志组件Log2Net的介绍和使用(附源码开源地址)
Log2Net是一个用于收集日志到数据库或文件的组件,支持.NET和.NetCore平台. 此组件自动收集系统的运行日志(服务器运行情况.在线人数等).异常日志.程序员还可以添加自定义日志. 该组件支 ...
- 【IDEA】关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ,启动服务,访问不到解决方案
问题描述: 新建的 maven 的 Module 项目,webapp 文件夹也是在创建完项目后手动添加的,出现了 webapp 文件夹不能被识别的情况. 解决方案: 第一步: 选中项目按 F4 键, ...
- Visual Studio 2015、2013、2012、2010、2008、2005各版本下载+有效密钥激活
Visual Studio是微软发布的一个集成开发工具,业内一般简称为VS,广泛应用于Windows软件开发.网站开发等,是目前十分流行的windows应用程序的集成开发工具,如果大家不了解,可以简单 ...
- 牛客练习赛42A(字符串)
传送门 结论是:一定是选取最长的那个AB连续子串. 把题面要求的a*b + a + b转化一下成(a + 1)*(b + 1) - 1,即可发现如果选取前缀后缀不连续的两段作为答案,则显然有更优解,即 ...
- bryce1010专题训练——CDQ分治
Bryce1010模板 CDQ分治 1.与普通分治的区别 普通分治中,每一个子问题只解决它本身(可以说是封闭的) 分治中,对于划分出来的两个子问题,前一个子问题用来解决后一个子问题而不是它本身 2.试 ...
- HDU 3117 Fibonacci Numbers 数学
http://acm.hdu.edu.cn/showproblem.php?pid=3117 fib是有一个数学公式的. 这里的是标准的fib公式 那么fib = 1 / sqrt(5) * ((1 ...
- 物体检测丨Faster R-CNN详解
这篇文章把Faster R-CNN的原理和实现阐述得非常清楚,于是我在读的时候顺便把他翻译成了中文,如果有错误的地方请大家指出. 原文:http://www.telesens.co/2018/03/1 ...