最近elementUI的级联选择器要用到 根据国内外方案 做了一个我需要的!

https://jsfiddle.net/stywell/...

var list = [

{

"ID": 1,

"FatherID": 0,

"TypeName": "风电",

"SortID": 2,

"Depth": 0,

"RootID": 1,

"IsFather": true

},

{

"ID": 2,

"FatherID": 1,

"TypeName": "风力发电",

"SortID": 11,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 13,

"FatherID": 1,

"TypeName": "风电整机",

"SortID": 13,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 23,

"FatherID": 1,

"TypeName": "叶片及材料",

"SortID": 14,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 33,

"FatherID": 1,

"TypeName": "发电机及元件",

"SortID": 15,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 44,

"FatherID": 1,

"TypeName": "塔筒/塔架",

"SortID": 16,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 54,

"FatherID": 1,

"TypeName": "控制系统",

"SortID": 18,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 65,

"FatherID": 0,

"TypeName": "核电",

"SortID": 4,

"Depth": 0,

"RootID": 65,

"IsFather": true

},

{

"ID": 77,

"FatherID": 65,

"TypeName": "核电站",

"SortID": 651,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 66,

"FatherID": 65,

"TypeName": "核电设备",

"SortID": 652,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 91,

"FatherID": 65,

"TypeName": "核电工程",

"SortID": 653,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 103,

"FatherID": 0,

"TypeName": "水电",

"SortID": 3,

"Depth": 0,

"RootID": 103,

"IsFather": true

},

{

"ID": 117,

"FatherID": 103,

"TypeName": "水电站",

"SortID": 1031,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 104,

"FatherID": 103,

"TypeName": "水电设备",

"SortID": 1032,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 130,

"FatherID": 103,

"TypeName": "水利水电设计院",

"SortID": 1033,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 136,

"FatherID": 103,

"TypeName": "水电工程",

"SortID": 1034,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 699,

"FatherID": 0,

"TypeName": "环保",

"SortID": 6,

"Depth": 0,

"RootID": 699,

"IsFather": true

},

{

"ID": 700,

"FatherID": 699,

"TypeName": "水处理",

"SortID": 6991,

"Depth": 1,

"RootID": 699,

"IsFather": true

},

{

"ID": 720,

"FatherID": 699,

"TypeName": "脱硫脱硝",

"SortID": 6992,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 740,

"FatherID": 699,

"TypeName": "环保设备",

"SortID": 6993,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 760,

"FatherID": 699,

"TypeName": "固废处理",

"SortID": 6994,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 780,

"FatherID": 699,

"TypeName": "环保发电",

"SortID": 6995,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 794,

"FatherID": 699,

"TypeName": "环保工程",

"SortID": 6998,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 811,

"FatherID": 699,

"TypeName": "除灰除尘",

"SortID": 69910,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 853,

"FatherID": 699,

"TypeName": "环境监测与评价",

"SortID": 69912,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 864,

"FatherID": 699,

"TypeName": "建筑节能",

"SortID": 69913,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 874,

"FatherID": 699,

"TypeName": "工业节能",

"SortID": 69914,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 881,

"FatherID": 699,

"TypeName": "合同能源管理",

"SortID": 69915,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 895,

"FatherID": 699,

"TypeName": "节能设备",

"SortID": 69916,

"Depth": 1,

"RootID": 699,

"IsFather": false

}

];

var list2 = [

{

"ID": 1,

"FatherID": -1,

"TypeName": "风电",

"SortID": 2,

"Depth": 0,

"RootID": 1,

"IsFather": true

},

{

"ID": 2,

"FatherID": 1,

"TypeName": "风力发电",

"SortID": 11,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 13,

"FatherID": 1,

"TypeName": "风电整机",

"SortID": 13,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 23,

"FatherID": 1,

"TypeName": "叶片及材料",

"SortID": 14,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 33,

"FatherID": 1,

"TypeName": "发电机及元件",

"SortID": 15,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 44,

"FatherID": 1,

"TypeName": "塔筒/塔架",

"SortID": 16,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 54,

"FatherID": 1,

"TypeName": "控制系统",

"SortID": 18,

"Depth": 1,

"RootID": 1,

"IsFather": false

},

{

"ID": 65,

"FatherID": -1,

"TypeName": "核电",

"SortID": 4,

"Depth": 0,

"RootID": 65,

"IsFather": true

},

{

"ID": 77,

"FatherID": 65,

"TypeName": "核电站",

"SortID": 651,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 66,

"FatherID": 65,

"TypeName": "核电设备",

"SortID": 652,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 91,

"FatherID": 65,

"TypeName": "核电工程",

"SortID": 653,

"Depth": 1,

"RootID": 65,

"IsFather": false

},

{

"ID": 103,

"FatherID": -1,

"TypeName": "水电",

"SortID": 3,

"Depth": 0,

"RootID": 103,

"IsFather": true

},

{

"ID": 117,

"FatherID": 103,

"TypeName": "水电站",

"SortID": 1031,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 104,

"FatherID": 103,

"TypeName": "水电设备",

"SortID": 1032,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 130,

"FatherID": 103,

"TypeName": "水利水电设计院",

"SortID": 1033,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 136,

"FatherID": 103,

"TypeName": "水电工程",

"SortID": 1034,

"Depth": 1,

"RootID": 103,

"IsFather": false

},

{

"ID": 699,

"FatherID": -1,

"TypeName": "环保",

"SortID": 6,

"Depth": 0,

"RootID": 699,

"IsFather": true

},

{

"ID": 700,

"FatherID": 699,

"TypeName": "水处理",

"SortID": 6991,

"Depth": 1,

"RootID": 699,

"IsFather": true

},

{

"ID": 720,

"FatherID": 699,

"TypeName": "脱硫脱硝",

"SortID": 6992,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 740,

"FatherID": 699,

"TypeName": "环保设备",

"SortID": 6993,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 760,

"FatherID": 699,

"TypeName": "固废处理",

"SortID": 6994,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 780,

"FatherID": 699,

"TypeName": "环保发电",

"SortID": 6995,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 794,

"FatherID": 699,

"TypeName": "环保工程",

"SortID": 6998,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 811,

"FatherID": 699,

"TypeName": "除灰除尘",

"SortID": 69910,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 853,

"FatherID": 699,

"TypeName": "环境监测与评价",

"SortID": 69912,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 864,

"FatherID": 699,

"TypeName": "建筑节能",

"SortID": 69913,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 874,

"FatherID": 699,

"TypeName": "工业节能",

"SortID": 69914,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 881,

"FatherID": 699,

"TypeName": "合同能源管理",

"SortID": 69915,

"Depth": 1,

"RootID": 699,

"IsFather": false

},

{

"ID": 895,

"FatherID": 699,

"TypeName": "节能设备",

"SortID": 69916,

"Depth": 1,

"RootID": 699,

"IsFather": false

}

];

var list3 = [

{

"tid": 1,

"parent": -1,

"TypeName": "风电",

"SortID": 2,

},

{

"tid": 2,

"parent": 1,

"TypeName": "风力发电",

"SortID": 11,

},

{

"tid": 13,

"parent": 1,

"TypeName": "风电整机",

"SortID": 13,

},

{

"tid": 23,

"parent": 1,

"TypeName": "叶片及材料",

"SortID": 14,

},

{

"tid": 33,

"parent": 1,

"TypeName": "发电机及元件",

"SortID": 15,

},

{

"tid": 44,

"parent": 1,

"TypeName": "塔筒/塔架",

"SortID": 16,

},

{

"tid": 54,

"parent": 1,

"TypeName": "控制系统",

"SortID": 18,

},

{

"tid": 65,

"parent": -1,

"TypeName": "核电",

"SortID": 4,

},

{

"tid": 77,

"parent": 65,

"TypeName": "核电站",

"SortID": 651,

},

{

"tid": 66,

"parent": 65,

"TypeName": "核电设备",

"SortID": 652,

},

{

"tid": 91,

"parent": 65,

"TypeName": "核电工程",

"SortID": 653,

},

{

"tid": 103,

"parent": -1,

"TypeName": "水电",

"SortID": 3,

},

{

"tid": 117,

"parent": 103,

"TypeName": "水电站",

"SortID": 1031,

},

{

"tid": 104,

"parent": 103,

"TypeName": "水电设备",

"SortID": 1032,

},

{

"tid": 130,

"parent": 103,

"TypeName": "水利水电设计院",

"SortID": 1033,

},

{

"tid": 136,

"parent": 103,

"TypeName": "水电工程",

"SortID": 1034,

},

{

"tid": 699,

"parent": -1,

"TypeName": "环保",

"SortID": 6,

},

{

"tid": 700,

"parent": 699,

"TypeName": "水处理",

"SortID": 6991,

},

{

"tid": 720,

"parent": 699,

"TypeName": "脱硫脱硝",

"SortID": 6992,

},

{

"tid": 740,

"parent": 699,

"TypeName": "环保设备",

"SortID": 6993,

},

{

"tid": 760,

"parent": 699,

"TypeName": "固废处理",

"SortID": 6994,

},

{

"tid": 780,

"parent": 699,

"TypeName": "环保发电",

"SortID": 6995,

},

{

"tid": 794,

"parent": 699,

"TypeName": "环保工程",

"SortID": 6998,

},

{

"tid": 811,

"parent": 699,

"TypeName": "除灰除尘",

"SortID": 69910,

},

{

"tid": 853,

"parent": 699,

"TypeName": "环境监测与评价",

"SortID": 69912,

},

{

"tid": 864,

"parent": 699,

"TypeName": "建筑节能",

"SortID": 69913,

},

{

"tid": 874,

"parent": 699,

"TypeName": "工业节能",

"SortID": 69914,

},

{

"tid": 881,

"parent": 699,

"TypeName": "合同能源管理",

"SortID": 69915,

},

{

"tid": 895,

"parent": 699,

"TypeName": "节能设备",

"SortID": 69916,

}

];

function list2tree(data, opt) {

opt = opt || {};

var KEY_ID = opt.key_id || 'ID';

var KEY_PARENT = opt.key_parent || 'FatherID';

var KEY_CHILD = opt.key_child || 'children';

var EMPTY_CHILDREN = opt.empty_children;

var ROOT_ID = opt.root_id || 0;

var MAP = opt.map || {};

function getNode(id) {

var node = []

for (var i = 0; i < data.length; i++) {

if (data[i][KEY_PARENT] == id) {

for (var k in MAP) {

data[i][k] = data[i][MAP[k]];

}

if (getNode(data[i][KEY_ID]) !== undefined) {

data[i][KEY_CHILD] = getNode(data[i][KEY_ID]);

} else {

if (EMPTY_CHILDREN === null) {

data[i][KEY_CHILD] = null;

} else if (JSON.stringify(EMPTY_CHILDREN) === '[]') {

data[i][KEY_CHILD] = [];

}

}

node.push(data[i]);

}

}

if (node.length == 0) {

return;

} else {

return node;

}

}

return getNode(ROOT_ID)

}

var opt = {

"key_id": "ID", //节点的ID

"key_parent": "FatherID", //节点的父级ID

"key_child": "children", //子节点的名称

"empty_children": [], //子节点为空时,填充的值 //这个参数为空时,没有子元素的元素不带key_child属性;还可以为null或者[],同理

"root_id": 0, //根节点的父级ID

"map": { //在节点内映射一些值 //对象的键是节点的新属性; 对象的值是节点的老属性,会赋值给新属性

"value": "ID",

"label": "TypeName",

}

}

//默认

// var res = list2tree(list});

//添加映射

// var res = list2tree(list, {

// map: {"value": "ID","label": "TypeName"}

// });

//设置子节点为空时的类型 可以为 [] null 或者 不存在那个属性

// var res = list2tree(list, {

// map: {"value": "ID","label": "TypeName"},

// empty_children: [],

// });

//根元素ID不为0时的情况

// var res = list2tree(list2, {

// map: {"value": "ID","label": "TypeName"},

// empty_children: [],

// root_id: -1,

// });

//全参数

var res = list2tree(list3, {

map: {

"value": "tid",

"label": "TypeName",

"foo": "tid",

},

//empty_children: null,

root_id: -1,

key_id: 'tid',

key_parent: 'parent',

key_child: 'nodes'

});

console.log(res);

document.write('

');

document.write(JSON.stringify(res, null, 2));

python使用json实现树结构_js怎样将获取json转换为树形结构相关推荐

  1. $get服务器上的json文件,Web前端:$.getJSON获取json数据失败

    JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式.它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本 ...

  2. vue接收json数据_Vue之使用ajax获取json数据,并用v-for循环显示在表格中

    运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...

  3. js 获取json数组里面数组的长度

    作为一个前端页面开发者第一次处理json数据,遇到了'js 获取json数组里面数组的长度'?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋 ...

  4. js 获取json数组里面数组的长度实例

    作为一个前端页面开发者第一次处理json数据,遇到了'js 获取json数组里面数组的长度'?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋 ...

  5. java 获取json的值_Java如何获取JSON数据中的值

    场景:在接口自动化场景中,下个接口发送的请求参数,依赖上个接口请求结果中的值.需要将获取值作为全局参数引用. import java.io.File; import java.io.FileInput ...

  6. java:字符串转json并获取json值

    假设有一串字符串的值是 "user: {"code":"ceshiadd","name":"ceshiadd" ...

  7. c语言 json数组长度,js 获取json数组里面数组的长度

    作为一个前端页面开发者第一次处理json数据,遇到了'js 获取json数组里面数组的长度'?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋 ...

  8. php json数组的长度,js 获取json数组里面数组的长度实例

    作为一个前端页面开发者第一次处理json数据,遇到了'js 获取json数组里面数组的长度'?竟然不知道 json没有.length属性(真是要嘲讽下自己),少壮不努力老大徒伤悲啊!以前都是去寻求男朋 ...

  9. 洗礼灵魂,修炼python(70)--爬虫篇—补充知识:json模块

    在前面的某一篇中,说完了pickle,但我相信好多朋友都不懂到底有什么用,那么到了爬虫篇,它就大有用处了,而和pickle很相似的就是JSON模块 JSON 1.简介 1)JSON(JavaScrip ...

最新文章

  1. Java练习 SDUT-1230_平方和与立方和
  2. 终于可以光明正大的推别人了
  3. 基于Spark MLlib平台的协同过滤算法---电影推荐系统
  4. P7116-[NOIP2020]微信步数【数学】
  5. express中res.json方法
  6. python创建数据库表_Python 操作数据库(1)SQL基础
  7. linux安装golang!!
  8. MapReduce on Hbase
  9. 【预测模型】基于BP神经网络预测股票matlab代码
  10. 华硕笔记本电池软件_成色配置都还不错的二手华硕7代 i5 笔记本电脑 只卖1599元 想要的 快进来看看...
  11. 复制xml导致乱码问题解决。
  12. ffmpeg将amr文件转成mp3文件
  13. 【连载】线性代数笔记——第二章矩阵2
  14. 使用Axure制作手风琴菜单
  15. Rate Limiting速率限制
  16. 输入年份和天数计算出几月几号
  17. NVDIMM 知识点
  18. C++虚函数概念及使用(基础)
  19. Sound Forge使用技巧之制作手机铃声
  20. 【自动控制原理】——第二章——数学模型【时域】【复频域】【梅森增益公式】

热门文章

  1. 用于matplotlib对齐很有用的算法,可用于面试笔试
  2. oracle TNS: 协议适配器错误 解决办法
  3. .net 内嵌 GeckoWebBrowser (firefox) 核心浏览器
  4. 修改 ASP.NET 请求队列的限制
  5. C# 指定Webbrowser控件所用IE内核版本
  6. RabbitMQ下的生产消费者模式与订阅发布模式
  7. 数据访问与sql语句的管理(一)
  8. 客观地认识程序员心中的恐惧
  9. js 两行之间的设置间距_防火间距
  10. 从Zipkin到Jaeger,Uber的分布式追踪之道tchannel