根据回传Json数据生成树_weixin_34258838的博客-程序员秘密

<!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

本文链接：https://blog.csdn.net/weixin_34258838/article/details/91837872

智能推荐

Meta-StyleSpeech : Multi-Speaker Adaptive Text-to-Speech Generation_adaptive layer normalization_林林宋的博客-程序员秘密

文章目录abstract1. introduction3. StyleSpeech作者：Dongchan Min单位：KAIST会议：2021 ICMLabstract拟解决的问题：目标说话人很少的数据完成语音合成的任务方法：提出Style-Adaptive Layer Normalization（SALN），从ref-audio的一句话中提取风格；引入两个style prototypes训练的判别器将此引申为meta-style speech，以提升对新的说话人的风格适应能力。1.

VC++获取IDC_EDIT的7种方法_丨Barneyx的博客-程序员秘密

//第一种方法int number1, number2, number3;char char1[10], char2[10], char3[10];GetDlgItem(IDC_EDIT1)->GetWindowText(cahr1, 10);GetDlgITem(IDC_EDIT2)->GetWindowText(char2, 10);number1 = atoi

hduoj 1234开门人和关门人_Adamaomaoo的博客-程序员秘密

Problem Description每天第一个到机房的人要把门打开，最后一个离开的人要把门关好。现有一堆杂乱的机房签到、签离记录，请根据记录找出当天开门和关门的人。 Input测试输入的第一行给出记录的总天数N ( > 0 )。下面列出了N天的记录。每天的记录在第一行给出记录的条目数M ( > 0 )，下面是M行，每行的格式为

i5-10400F配什么主板？_sinat_50517307的博客-程序员秘密

英特尔十代处理器配套并同步上市的主板是400系列主板，在intel 400系列中，分别zhi有Z490、H470、B460以及入门的H410芯片组等，这些主板均配dao备LGA 1200插槽，所以它们都可以支持并最佳兼容i5-10400和i5-10400F处理器，但是最佳搭配是哪一款呢？i5-10400F组装电脑怎么搭配更合适，这些点很重要!看完你就知道了…https://jx.tmall.com/?其中H410定位入门级主板，基本可以排除，但是预算十分吃紧可以考虑，毕竟主板对性能的影响不大，而H47

PYQT5项目实践|实现Python+cplex 求解模型后，写入GUI小程序中，具体实践包括： CPLEX 的求解整数规划模型和求解结果以表的形式输出在GUI界面中_码丽莲梦露的博客-程序员秘密

1 Cplex求解模型代码#coding:utf-8import cplexfrom cplex.exceptions import CplexErrorfrom pandas import DataFrameimport pandas as pdimport numpy as npclass ILP: def __init__(self, CMI, margins, beds): self.cmi = CMI self.margins = ma

React hooks详解_Hyi_8222的博客-程序员秘密

前言- React是主流的前端框架，其核心是组件。- 在v16.8 版本之前，组件的标准写法是类class，但class存在一些缺点，如： 1、业务逻辑分散在各个方法中，导致重复逻辑、关联逻辑，代码量重 2、大型组件很难拆分和重构，很难测试3、组件类引入了复杂的编程模式，比如 render props 和高阶组件- React团队在v16.8 版本引入了React hooks。hook的汉语意思是钩子，React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能

随便推点

本地存储三种方式cookie、localStorage、sessionStorage的详细介绍_前端本地存储有几种方式_傲娇味的草莓的博客-程序员秘密

前言网页刷新的时候数据会被清空，这时候就需要用到存储技术。前端本地存储的方式有三种，分别是cookie、localStorage、sessionStorage。在前端面试过程中，经常会被问及这些存储技术和区别，优缺点，但是很少有人真正理解这些存储技术的具体介绍。笔者以为在学习过程中，首先要明白是什么学懂是什么为什么怎么样，然后再去比较这三者会比较好一点，有一种逻辑性，而不是一上来就背诵一些面经。本文会先整理这三者的介绍，下一篇文章会详细整理这三者的区别和应用场景。一、cookie1.1 cookie是