后台返回平铺数据,如何转换成树形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中excel导入导出组件
vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...
- E20180513-hm
letter n. 信; 证书,许可证; 字母,文字; 字面意义; bracket n. 支架,悬臂; 括弧; 类别,等级; [数] 同类项; coefficient n. 系数; (测定某种质量或 ...
- lightoj1072【简单数学】
题意: 一个大圆的半径,里面有相邻的n个小圆,求这些小圆的半径: 思路: x=sin(2π/n); r=x*R/(1+x); #include <bits/stdc++.h> using ...
- UGUI 锚点坑
----------------------------------------------------------------- 关键点:4个实心蓝点距离雪花4瓣的距离永远不变 锚点Anchors: ...
- 51nod1639(组合数学)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1639 题意:中文题诶- 思路:组合数学 n根鞋带要组成一个环, ...
- mysql--浅谈视图1
这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 视图(view) 什么是视图? 答:视图是表通过某种运算得到的一个投影,占有一定空间的 ...
- AVL树(自平衡二叉查找树)
了解AVL树之前要先了解二叉查找树(BST),BST查找元素的时间复杂度平均是O(logN),最坏的情况是O(N),所有的元素都接在左子树(或者右子树)就相当于一串链表了.而AVL树会对子树过高的情况 ...
- PostgreSQL-6-数据分组
基本语法 SELECT column-list FROM table_name WHERE [ conditions ] GROUP BY column1, column2 HAVING [ cond ...
- Tomcat固定的目录结构
1. /work Tomcat把由Jsp生成的Servlet放于此目录下. 2. /webapps 当发布Web应用时,默认情况下把Web应用文件放于此目录下. 3. /logs 存放Tomcat的日 ...
- drupal6提示 Compilation failed: disallowed Unicode code point (>= 0xd800 && <= 0xdfff) at offset 9 on line 615
解决办法:将sites\all\modules\ctools\includes\cleanstring.inc文件中的61行改成62行这样子即可,如下图