/**
* json格式转树状结构
* @param {json} json数据
* @param {String} id的字符串
* @param {String} 父id的字符串
* @param {String} children的字符串
* @return {Array} 数组
*/
function transData(a, idStr, pidStr, chindrenStr){
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
for(; i < len; i++){
hash[a[i][id]] = a[i];
}
for(; j < len; j++){
var aVal = a[j], hashVP = hash[aVal[pid]];
if(hashVP){
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
}else{
r.push(aVal);
}
}
return r;
}
var jsonData = eval('[{"id":"4","pid":"1","name":"大家电"},{"id":"5","pid":"1","name":"生活电器"},{"id":"1","pid":"0","name":"家用电器"},{"id":"2","pid":"0","name":"服饰"},{"id":"3","pid":"0","name":"化妆"},{"id":"7","pid":"4","name":"空调"},{"id":"8","pid":"4","name":"冰箱"},{"id":"9","pid":"4","name":"洗衣机"},{"id":"10","pid":"4","name":"热水器"},{"id":"11","pid":"3","name":"面部护理"},{"id":"12","pid":"3","name":"口腔护理"},{"id":"13","pid":"2","name":"男装"},{"id":"14","pid":"2","name":"女装"},{"id":"15","pid":"7","name":"海尔空调"},{"id":"16","pid":"7","name":"美的空调"},{"id":"19","pid":"5","name":"加湿器"},{"id":"20","pid":"5","name":"电熨斗"}]');
var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
console.log(jsonDataTree);
//[{"id":"1","pid":"0","name":"家用电器","chindren":[{"id":"4","pid":"1","name":"大家电","chindren":[{"id":"7","pid":"4","name":"空调","chindren":[{"id":"15","pid":"7","name":"海尔空调"},{"id":"16","pid":"7","name":"美的空调"}]},{"id":"8","pid":"4","name":"冰箱"},{"id":"9","pid":"4","name":"洗衣机"},{"id":"10","pid":"4","name":"热水器"}]},{"id":"5","pid":"1","name":"生活电器","chindren":[{"id":"19","pid":"5","name":"加湿器"},{"id":"20","pid":"5","name":"电熨斗"}]}]},{"id":"2","pid":"0","name":"服饰","chindren":[{"id":"13","pid":"2","name":"男装"},{"id":"14","pid":"2","name":"女装"}]},{"id":"3","pid":"0","name":"化妆","chindren":[{"id":"11","pid":"3","name":"面部护理"},{"id":"12","pid":"3","name":"口腔护理"}]}]
分享到:
相关推荐
一个Web组件,以树状视图可视化JSON数据 安装 npm i @alenaksu/json-viewer 然后将包导入到您的项目中。 import '@alenaksu/json-viewer' ; 用法 < json> </ json> 属性 data - JSON对象的字符串表示来负载 特性 ...
最近做了一个类似用js实现思维导图的功能,作为思维导图,一定会有树状结构的数据产生,在操作里面的节点时会经常需要查找节点 的父节点及父节点。 对于未知层级的树状数据,用for循环是无法实现的,因为不知道要...
基于JSON的树结构,拥有拖放功能,可以重新排列树。 为深度嵌套的JSON数据和webpack配置展示一些有用的树操作,以减少包大小。
它提供了一个树状视图来表示JSON文档的结构,用户可以从上下文菜单中操作JSON。 它也有一个文本视图来显示JSON文档的内容,用户可以在其中编辑JSON。 使用Vue.js进行开发2.请详细参考。特征JSON文档的树状视图JSON...
格式如下,适合做省市区联动&树形菜等: [{ "value": "110000", "label": "北京市", "children": [{ "value": "110100", "label": "北京市", "children": [{ "value": "110101", "label": "东城区" ...
最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上...下面给大家来分享下我的JS代码! 下面我们来看看具体的效果如下: 下面我
JSON模式的直观编辑器,提供树视图以显示模式结构,并提供属性检查器以编辑模式元素的属性。 使用Vue.js 2和Firebase开发。 请参考了解详细信息。 产品特点 模式元素托盘 JSON模式的所有元素的列表,可以拖放到树状...
js如何构造elementUI树状菜单的数据结构详解 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格。 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型。 需要把list转换成tree的结构。...
curl.js将文本转换为树层次结构。 每行的缩进级别(每行前的空格)用作树中节点的深度。 此插件最初是作为的前半部分创建的, 是一种模板引擎,可通过带缩进的文本创建HTML元素。 使用curl.js ,此输入: curly ...
数据结构为数组中包含对象–树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据。本文为用Vue实现方式,另有一篇为用knockout.js的实现方法。 ...
注意:此树状菜单是一级一级读取json数据的,点击才会触发下级分类,不是一次性读取所有树状结构数据,这样可以减轻些读取压力吧。 顺便科普个小知识,谷歌浏览器在启动快捷方式地址后 --allow-file-access-from-...
把一个线性数组转成树形数组,在网上查了很多文章,觉得他们写的太复杂了,于是自己写了一个,在折腾了一下午终于把它写出来啦(激动.gif),用两个filter过滤器就搞定了,代码简洁明了,数据结构小白都能看懂。...
海鸟一种树状结构查询语言 这是我在工作时编写的树查询语言的重写。 我在工作中编写的那个不是开源的,并且需要一些自定义的C ++实现。 这个版本是对我在Java语言中使用的树查询语言的重写。 应用 该库具有用于进行...
允许用户动态编辑orgchart并将最终层次结构另存为JSON对象。 支持将图表导出为图片或pdf文件。 支持平移和缩放。 允许用户自定义每个节点的内部结构。 用户可以采用多种解决方案来构建庞大的组织结构图(请参阅...
json-schema-editor一个用于JSON模式的直观编辑器,它提供一个树视图来显示模式结构,并提供一个属性检查器来编辑json-schema-editor一个用于JSON模式的直观编辑器,它提供一个树状视图来显示模式结构和属性检查器以...
10.树状结构可以选择出现在某一列,不一定要在第一列 11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 12.表格树从右到左显示 13.本地节点搜索,服务器端节点搜索(未实现待完成) 14.无变化重新...
React选择树该组件可帮助您逐步,逐级选择树状数据结构的元素存储库本身尚未移动到单独的npm软件包。 因此,它包含该组件的源代码以及主要App.js组件内的几个示例。例子假设您正在使用市场,并且正在寻找来自某些...
4、将该组件的js、less文件放到kpiTree目录下,在kpiTree目录下创建images目录将组件需要的图片放入给目录,在kpiTree目录下创建json文件夹将该组件需要的json文件放入改文件夹中,组件便可正常运行。 kpiTree.js...
第10章 设计树状结构布局 10.1 TreePanel的基本使用 10.1.1 创建一棵树 10.1.2 为树生枝展叶 10.1.3 树形的配置 10.1.4 使用TreeLoader获得数据 10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4...
第10章 设计树状结构布局 10.1 TreePanel的基本使用 10.1.1 创建一棵树 10.1.2 为树生枝展叶 10.1.3 树形的配置 10.1.4 使用TreeLoader获得数据 10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4...