JavaScript list转tree
js list转tree
- //------------------------------------List Convert to Tree ----------------------------------------------------//
- /**
- * 将list装换成tree 封装到JqueryUtils
- * @param {Object } id 节点主ID
- * @param {Object } pId 父节点ID
- * @param {Object } list list数据
- * @return {Node} - 自定义Node树节点
- * @author Jason - jasonandy@hotmail.com
- */
- function listToTree(id,pId,list){
- convertToNodeList(list);
- /**
- * @param {} list list
- * @param {} pId 父节点
- * @return {Boolean} 是否存在父节点
- * @description now.id = other.pid other 的父节点为 noew
- */
- function exists(list, pId){
- for(var i=0; i<list.length; i++){
- if (list[i][id] == pId){
- return true;
- }
- }
- return false;
- }
- /**
- * 树节点数据 最终数据结构
- * @type Node treeNode
- */
- var nodes = [];
- /**
- * 将所有的节点数据装入List
- * @type Number
- */
- for(var i=0; i<list.length; i++){
- var row = list[i];
- if (!exists(list, row[pId])){//now.pid != new.id
- nodes.push(row);//new ids
- }
- }
- /**
- * 父节点
- * @type Node
- */
- var pNodes = [];
- /**
- * 将所有的子节点数据装入 pNodes
- * @type pNodes
- */
- for(var i=0; i<nodes.length; i++){
- pNodes.push(nodes[i]);
- }
- /**
- * 循环处理所有节点数据并进行封装
- */
- while(pNodes.length){
- /**
- * 把数组的第一个元素从其中删除,并返回第一个元素的值
- * the parent node
- */
- var node = pNodes.shift();
- /**
- *
- * get the children nodes
- */
- for(var i=0; i<list.length; i++){
- var row = list[i];
- /**
- * 取出list所有数据 比较处理
- *
- * 这里可以定制化 Node 节点数据结构
- * {
- * "isActive": true,
- * "isRoot": true,
- * "title": "标题1",
- * "items": [
- * {
- * "text": "内容1"
- * },
- * {
- * "text": "内容2"
- * }
- * ]
- * }
- */
- if (row[pId] == node[id]){
- /**
- * 如果有items 直接放入
- */
- if (node.items){
- node.items.push(row);
- } else {
- node.items = [row];
- }
- pNodes.push(row);
- }
- }
- }
- return nodes;
- }
- /**
- * Node 节点数据封装
- * @param {} list 转为map结构数据
- * @return {} list 需要转换的list
- */
- function convertToNodeList(list){
- $.each(list,function(i,e){
- e['title'] = e.NAME;
- e['isRoot'] = (e.PARENT_ID == '-1');
- e['isActive'] = (e.ENABLE_STATUS == '01');
- })
- return list;
- }
- //------------------------------------List Convert to Tree End----------------------------------------------------//
JavaScript list转tree的更多相关文章
- 配置Tree Shaking来减少JavaScript的打包体积
译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...
- 实用的树形菜单控件tree
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview jQuery jstree jsTree ...
- MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
- e3.tree参考手册
简介 1. E3.Tree是E3平台下一个用于构造树型UI(menu,tree,outlookbar等)的的组件, E3.Tree 特色 部署简单,只需要把相关jar放到WEB-INF/lib目录 ...
- easyui struts后台实现tree返回json数据
首先jsp页面有一ul用于展现tree <ul id="trueULid"></ul> 加载tree <script type="text/ ...
- EasyUI tree扩展获取实心节点
<script type="text/javascript"> //扩展 获得tree 的实心节点 $(function(){ $.extend($.fn.tree.m ...
- EasyUI tree 异步树与采用扁平化实现的同步树
所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips: 可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...
- 使用jQuery开发tree插件
1.插件截图 2.插件使用 首先引入jquery库,然后引入tree.js.tree.css文件,如下: <script type="text/javascript" src ...
- 12、jquery的tree组件
1. <!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery ...
随机推荐
- 有关Python的import...和from...import...的区别
1.语法分析:首先from A import a1 是从A模块导入a1工具(可以是某个 函数,全局变量,类),import A是导入整个A模块的全部内容(包括全部的函数,全局变量,类). 2.内存分析 ...
- mysql数据库分库分表(Sharding)(转)
mysql数据库切分 前言 通过MySQLReplication功能所实现的扩展总是会受到数据库大小的限制.一旦数据库过于庞大,尤其是当写入过于频繁,非常难由一台主机支撑的时候,我们还是会面临到扩展瓶 ...
- consul上删除已经注册的节点
1,在consul上找到要删除的ID, 2,在consul的节点上删除这个ID:固定格式: 命令如果运行成功:没有任何的返回值 [root@beta-commonsrv01 ~] $curl --re ...
- Android:Recents和AMS中历史任务的区别
1.1 任务和返回栈 - 实际数据模型 这个是指在调度体系里实际保存的TaskRecord实例,而ActivityRecord-TaskRecord-ActivityStack之间的关系建议看官方文 ...
- -bash: netstat: 未找到命令
[root@localhost ~]# netstat -lunpt -bash: netstat: 未找到命令 [root@localhost ~]# yum -y install net-tool ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_12-用户退出-服务端
实现退出 用户退出要以下动作: 1.删除redis中的token 2.删除cookie中的token controller内定义 spring securety config内放行 对这个url放行 ...
- Qt编写自定义控件50-迷你仪表盘
一.前言 这个控件取名叫迷你仪表盘,是以为该控件可以缩小到很小很小的区域显示,非常适合小面积区域展示仪表数据使用,还可以手动触摸调节进度,是我个人觉得最漂亮小巧的一个控件.初次看到类似的控件是在一个音 ...
- xshell6破解4窗口限制
资源路径: 链接: https://pan.baidu.com/s/11zumNoaIN1AF_YhmiPGWdA 提取码: nfs9 破解方法 先卸载系统中已经安装的xshell与xftp 然后安装 ...
- 单层反查BOM
*&---------------------------------------------------------------------* *& Report YCX_001 * ...
- WPF引入OCX控件
(方法一) https://www.cnblogs.com/guaniu/archive/2013/04/07/3006445.html (方法二) 1.先注册OCX控件:(有的把OCX 控件封装到E ...