后台返回平铺数据,如何转换成树形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中引入公共方法并使用
test.js文件(公共js文件) function myFun() { console.log('this is my function') } export { myfun } // 2 expo ...
- HDU - 1715 - 大菲波数 - JAVA
http://acm.hdu.edu.cn/showproblem.php?pid=1715 import java.io.*; import java.util.*; import java.mat ...
- 609. Find Duplicate File in System
Given a list of directory info including directory path, and all the files with contents in this dir ...
- PTA 4-4 先序输出叶结点 【基础题】
//二叉树的叶结点:度为0的结点. void PreorderPrintLeaves( BinTree BT ) { if(BT==NULL) //如果传下来根节点就是空,直接返回: return; ...
- 渲染路径-Deferred Lighting 延时光照
http://blog.csdn.net/heyuchang666/article/details/51564954 注意: 最后3个步骤注意下 延时光照是有着最高保真度的光照和阴影的渲染路径.如果你 ...
- Codevs 1312 连续自然数和
1312 连续自然数和 题目描述 Description 对于一个自然数M,求出所有的连续的自然数段,使得这些连续自然数段的全部数字和为M.eg:1998+1999+2000+2001+2002=10 ...
- String字符串操作题
/** * 反转键盘录入字符串 * 反转键盘录入的字符串 * 反转键盘录入的字符串 * 反转键盘录入的字符串 * */ Scanner sc = new Scanner(System.in);Stri ...
- 【BZOJ1122】[POI2008] 账本BBB
→传送门← 正解: 贪心加单调队列优化 先粘贴一张别人写的被老师发下来给我们的题解(就是看着这张题解才写出来的) 下面是自己的话(一些具体操作过程): 把环拆成一条2*n的链,然后用优先队列来求出每一 ...
- MyBatist庖丁解牛(五)
很多时候我们在自己的每个service中没有中注入SqlSessionTemplate; 但是我们直接调用mapper接口方法就直接能够操作数据库 这个是为什么??下面开始解惑: Mybatis Sq ...
- JToken和JObject有什么区别
JObject 用于操作JSON对象JArray 用语操作JSON数组JValue 表示数组中的值JProperty 表示对象中的属性,以"key/value"形式JT ...