根据回传Json数据生成树

最新推荐文章于 2021-11-24 14:32:38 发布
最新推荐文章于 2021-11-24 14:32:38 发布
阅读量233 收藏
点赞数
文章标签： json 前端 xhtml ViewUI
原文链接：https://my.oschina.net/parker/blog/132336
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>树控件</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1.8.1.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
                font-size: 12px;
                color: #666;
                font-family: Arial, "微软雅黑";
            }
            
            #jptree {
                overflow: hidden;
            }
            
            #jptree #left {
                width: 260px;
                padding: 10px;
                float: left;
                background: #eee;
            }
            
            #jptree #right {
                margin-left: 280px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="jptree">
            <div id="left">
                <div id="left_top">
                    树结构内容
                </div>
                <ul id="treeNode">
                </ul>
            </div>
            <div id="right">
                <div id="right_top">
                    内容展示
                </div>
                <div id="right_con">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var nodes = {
                "CLSID": "_内部类型_",
                "RST": ["属于", "连接", "附加", "任务", "设备组", "角色"],
                "group": {
                    "资产": ["园区", "建筑", "楼层", "房间", "独立设备", "组", "机柜", "架式设备", "小品", "放样物体", "放样物体集合"],
                    "便签": ["便签"],
                    "机柜": ["机柜"],
                    "配线": ["配线"],
                    "人员": ["用户"],
                    "任务单": ["任务单"],
                    "上架": ["架式设备"],
                    "设备组": ["设备组"],
                    "角色": ["角色"],
                    "库存": ["库存"]
                },
                "classPool": {
                    "园区": {
                        "_ID_": "名称",
                        "_NAME_": "名称"
                    },
                    "建筑": {
                        "_ID_": "名称",
                        "_NAME_": "名称",
                        "_PARENT_": "所属"
                    },
                    "楼层": {
                        "_ID_": "名称",
                        "_NAME_": "名称",
                        "_PARENT_": "所属"
                    },
                    "房间": {
                        "_ID_": "名称",
                        "_NAME_": "名称",
                        "_PARENT_": "所属"
                    },
                    "组": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属"
                    },
                    "机柜": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_PRODUCT_": "产品库",
                        "_BOOK_": "关联台账"
                    },
                    "架式设备": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_SITE_": "统计分类2",
                        "_布局_": "布局",
                        "_PRODUCT_": "型号系列/版本号"
                    },
                    "刀片": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_SITE_": "统计分类2",
                        "_布局_": "布局",
                        "_PRODUCT_": "型号系列/版本号"
                    },
                    "独立设备": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_PRODUCT_": "产品库"
                    },
                    "门": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_PRODUCT_": "产品库"
                    },
                    "板卡": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属",
                        "_SITE_": "插槽",
                        "_PRODUCT_": "型号系列/版本号",
                        "_BOOK_": "关联台账"
                    },
                    "配线": {
                        "_ID_": "配线编号",
                        "_P1_": "P1设备编号",
                        "_P1PORT_": "P1端口编号",
                        "_P2_": "P2设备编号",
                        "_P2PORT_": "P2端口编号"
                    },
                    "便签": {
                        "_ID_": "id",
                        "_FID_": "fid",
                        "_TID_": "tid",
                        "_MSG_": "msg",
                        "_TIME_": "time"
                    },
                    "任务单": {
                        "_ID_": "id",
                        "_UID_": "uid",
                        "_NAME_": "name",
                        "_TIME_": "time"
                    },
                    "用户": {
                        "_ID_": "id",
                        "_USERNAME_": "username",
                        "_PASSWORD_": "password"
                    },
                    "产品库": {
                        "_ID_": "型号",
                        "_MODEL_": "模型"
                    },
                    "小品": {
                        "_ID_": "编号",
                        "_PARENT_": "所属",
                        "_PRODUCT_": "产品库"
                    },
                    "漏水线": {
                        "_ID_": "编号",
                        "_PARENT_": "所属"
                    },
                    "设备组": {
                        "_ID_": "id",
                        "_NAME_": "名称",
                        "_DEPICT_": "描述",
                        "_SCOPE_": "授权范围",
                        "_SCOPEAOP_": "授权权限",
                        "_BASE_": "附加范围",
                        "_BASEAOP_": "附加权限"
                    },
                    "角色": {
                        "_ID_": "id",
                        "_NAME_": "名称",
                        "_DEPICT_": "描述",
                        "_FUN_": "功能"
                    },
                    "放样物体": {
                        "_ID_": "编号",
                        "_NAME_": "编号",
                        "_PARENT_": "所属"
                    },
                    "放样物体集合": {
                        "_ID_": "名称",
                        "_NAME_": "名称",
                        "_PARENT_": "所属"
                    },
                    "库存": {
                        "_ID_": "编号",
                        "_INTYPE_": "设备所属类别",
                        "_PRODUCT_": "产品库"
                    },
                    "虚拟机": {
                        "_ID_": "编号",
                        "_NAME_": "名称",
                        "_PARENT_": "所属"
                    }
                },
                "relationPool": {
                    "建筑": {
                        "_PARENT_->属于": ["园区"]
                    },
                    "楼层": {
                        "_PARENT_->属于": ["建筑"]
                    },
                    "房间": {
                        "_PARENT_->属于": ["楼层"]
                    },
                    "组": {
                        "_PARENT_->属于": ["房间"]
                    },
                    "漏水线": {
                        "_PARENT_->属于": ["房间", "楼层"]
                    },
                    "放样物体": {
                        "_PARENT_->属于": ["园区", "建筑", "房间", "楼层"]
                    },
                    "放样物体集合": {
                        "_PARENT_->属于": ["园区", "建筑", "房间", "楼层"]
                    },
                    "机柜": {
                        "_PARENT_->属于": ["房间", "组"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "架式设备": {
                        "_PARENT_->属于": ["机柜"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "刀片": {
                        "_PARENT_->属于": ["机柜"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "独立设备": {
                        "_PARENT_->属于": ["房间", "组"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "门": {
                        "_PARENT_->属于": ["房间"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "板卡": {
                        "_PARENT_->属于": ["架式设备", "独立设备"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "小品": {
                        "_PARENT_->属于": ["房间", "楼层", "组"]
                    },
                    "漏水线": {
                        "_PARENT_->属于": ["组", "房间"],
                        "_PRODUCT_->附加": ["产品库"]
                    },
                    "配线": {
                        "_P1_->连接": ["架式设备", "独立设备", "板卡"],
                        "_P2_->连接": ["架式设备", "独立设备", "板卡"]
                    },
                    "便签": {
                        "_FID_->便签": ["用户"],
                        "_TID_->便签": ["建筑", "楼层", "房间", "组", "独立设备", "机柜", "架式设备", "用户"]
                    },
                    "任务单": {
                        "_UID_->任务": ["用户"]
                    },
                    "用户": {
                        "_ID_-设备组": {"设备组":"1212","12":"125566"},
                        "_ID_-角色": ["角色"]
                    }
                }
            };
			/**
			 * 判断类型
			 */
		    function type(obj){ 
		        switch(obj){ 
		            case null: 
		                return "null"; 
		            case undefined: 
		                return "undefined"; 
		        } 
		        var s=Object.prototype.toString.call(obj); 
		        switch(s){ 
		           case "[object String]": 
		               return "string"; 
		           case "[object Number]": 
		               return "number"; 
		           case "[object Boolean]": 
		               return "boolean"; 
		           case "[object Array]": 
		               return "array"; 
		           case "[object Date]": 
		               return "date"; 
		           case "[object Function]": 
		               return "function"; 
		           case "[object RegExp]": 
		               return "regExp"; 
		           case "[object Object]": 
		               return "object"; 
		           default: 
		               return "object"; 
		       } 
		   }  
			/**
			 * 树结构
			 * @param {Object} nodes
			 * @param {Object} box
			 */
			function jpTree(nodes,box){
				var tree = nodes;
				for(var key in tree){
					var temp = tree[key];
					if(type(temp)=="string"||type(temp)=="number"){
						if (box === undefined) {
							$("#treeNode").append("<li>"+key+"=>"+temp + "</li>");
						}else{
							$(box).append("<li>"+key+"=>"+ temp + "</li>");
						}
					}else if(type(temp)=='array'){
						if(box===undefined){
							$("#treeNode").append("<li><p>"+key+"</p><ul class='treeNodeArray"+key+"'></ul></li>");
							for(var j = 0; j < temp.length; j++){
								$(".treeNodeArray"+key).append('<li>'+temp[j]+'</li>');
							}
						}else{
							for(var j = 0; j < temp.length; j++){
								$(box).append('<li>'+key+'=>'+temp[j]+'</li>');
							}
						}
						jpTree(temp,'.treeNodeArray'+key);
					}else if(type(temp)=="object"){
						if (box === undefined) {
							$("#treeNode").append("<li><p>" + key + "</p><ul class='treeNodeObject" + key + "'></ul></li>");
						}else{
							$(box).append("<li><p>" + key + "</p><ul class='treeNodeObject" + key + "'></ul></li>");
						}
						jpTree(temp,'.treeNodeObject'+key);
					}else{
							
					}
				}
			}
			jpTree(nodes);
			$("#left").css({"height":$(window).height()-20,"overflow":"auto"});
        </script>
    </body>
</html>

转载于:https://my.oschina.net/parker/blog/132336

weixin_34258838
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js,json生成树
01-09
json数据直接生成js对象树
CSV生成JSON数据回传格式
01-09
标题中的"CSV生成JSON数据回传格式"涉及到的核心知识点有： 1. CSV解析：在VB.NET中，我们可以使用`TextFieldParser`类从CSV文件中读取数据。这个类提供了一种方便的方式来处理分隔符格式的文本文件，例如CSV。我们...
JSON数据生成树——（四）
weixin_34019144的博客
08-08 657
1.页面中准备树的div &lt;div class="user_left_tree_info"&gt; &lt;div class="user_left_tree_info_title"&gt;部门&lt;/div&gt; &lt;div class="hr"&gt;&lt;/div&gt;
数据生成树 ---新增
weixin_34080571的博客
02-17 155
数据生成树 使用存储过程在数据表中生成树 数据库 Category1表结构 ________________________________________ CREATE TABLE [dbo].[Category1]( [id] [int] IDENTITY(1,1) NOT NULL, [pid] [int] NULL, [Name] [varchar](100) NULL, [...
用数据表来生成树
weixin_30486037的博客
08-13 269
我想根据数据表datatable和节点名称来生成树treelist,不知道有没有已经实现的? 转载于:https://www.cnblogs.com/zyxfc/archive/2009/07/14/1523449.html
根据数据集动态生成TREE
weixin_33670713的博客
10-10 162
最近因为项目需要和服务端控件失效的无奈,只好自己写个TreeView,实现带CHECKBOX,可以自定义伸缩.提供获得选中的函数,支持json 代码下载/Files/wenjl520/newTree.rar 本文转自温景良博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2008/11/20/13...
Android页面之间进行数据回传的方法分析
09-02
这里我们着重探讨的是如何在Android页面之间进行数据回传，即从第二个页面返回到第一个页面时，携带数据一起返回。这通常用于实现用户在子页面完成某些操作后，将结果传递回主页面进行进一步的处理。 首先，从页面1...
JS 对java返回的json格式的数据处理方法
10-20
在JavaScript中，可以直接通过对象字面量的方式来表示和操作JSON数据。然而，当从Java服务器接收到JSON字符串时，我们需要将其转换为JavaScript对象。在示例代码中，使用了`eval`函数来实现这个转换： ```...
Android intent数据传递，数据回传
01-03
1.intent数据传递，第一个页面数据传到第二个页面 在两个页面中进行数据传递 下面都以intent显式页面跳转为例，，隐式跳转和显示跳转看下面链接 https://blog.csdn.net/qq_45844648/article/details/105362875 隐式...
物联网基站数据回传处理系统及数据回传处理规范编制说明共6
08-09
《物联网基站数据回传处理系统及数据回传处理规范编制说明》是一份详细阐述物联网基站数据管理和处理的文档，旨在规范物联网系统中的数据传输、存储和分析流程。这份6页的文档，作为技术指南，涵盖了物联网基站数据...
解析Json生成树状结构（无限级）
04-09
通过解析Json数据生成树状结构 1、使用newtonsoft.json解析json 2、无限级 3、父子节点联动
js 解析 json 生成树
03-23
都已经封装好了，只需要在test.html里面传递JSON的格式数据就可以了,节点动态生成。
基于JSON的树结构拥有拖放功能可以重新排列树
08-10
基于JSON的树结构，拥有拖放功能，可以重新排列树。 为深度嵌套的JSON数据和webpack配置展示一些有用的树操作，以减少包大小。
jquery使用EasyUI Tree异步加载JSON数据（生成树）
10-20
本篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据（生成树），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
生成JSON树型表结构
02-06
树型表结构，查询一次就可以构建出一个JSON的数据结构树，适用于EXT树
java根据数据库中的数据 的list 生成 tree 型 json
weixin_33955681的博客
01-25 484
这些代码 本来 也是 我网上找的但是 很遗憾 ，用数据源取到的list ，无法正常返回到前台，list 转json 的时候 就会 出错 ，我展示 正确的代码 1. package com.labci.javamail.test; import java.util.ArrayList; import java.util.Collections; import java.util.Iterato...
bootstrap ACE treeview json生成
nofarewells的专栏
02-18 4953
最近在做权限管理，前台使用的是基于bootstrap的ACE框架，前端的权限树使用的是ACE 改造过的treeview，需要的json格式如下 { "刑侦": { "text":"刑侦", "type":"folder", "additionalParameters": { "id":"1", "children": {
递归解析JSON对象并动态生成树
03-08 627
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...
把JSON格式的数据转化为树结构
m0_56856837的博客
11-24 3840
Vue把JSON数据做成树结构 在工作中，我们常常会遇到下面的问题，就是把数据转换成树结构来展示或者处理，这个时候就需要对JSON格式的数据进行转化，话不多说，直接上代码。 <script> getTreeData() { let dataArray = []; this.setTree.forEach((data) => { let parentId = data.parentId; if (parentId ===
安卓数据回传
最新发布
05-27
安卓数据回传可以通过使用Intent来实现。具体步骤如下： 1. 在Activity A中，通过startActivityForResult()方法启动Activity B，并传递需要回传的数据。 2. 在Activity B中，处理数据，并将处理后的数据通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值