1.代码

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Standard Data </TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>

    <SCRIPT type="text/javascript">

        <!--

        var setting = { };

        var nodes =[

            { name:"系统管理", open:true,

                children: [

                    { name:"用户管理",

                        children: [

                            { name:"叶子节点111"},

                            { name:"叶子节点112"},

                            { name:"叶子节点113"},

                            { name:"叶子节点114"}

                        ]},

                    { name:"角色管理",open:true,

                        children: [

                            { name:"叶子节点121"},

                            { name:"叶子节点122"},

                            { name:"叶子节点123"},

                            { name:"叶子节点124"}

                        ]},

                    { name:"菜单管理", isParent:true}

                ]},

            { name:"文件管理",

                children: [

                    { name:"创建", open:true,

                        children: [

                            { name:"叶子节点211"},

                            { name:"叶子节点212"},

                            { name:"叶子节点213"},

                            { name:"叶子节点214"}

                        ]},

                    { name:"修改",open:false,

                        children: [

                            { name:"叶子节点221"},

                            { name:"叶子节点222"},

                            { name:"叶子节点223"},

                            { name:"叶子节点224"}

                        ]},

                    { name:"删除",

                        children: [

                            { name:"叶子节点231"},

                            { name:"叶子节点232"},

                            { name:"叶子节点233"},

                            { name:"叶子节点234"}

                        ]}

                ]},

            { name:"待续", isParent:true}

        ];

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);

        });

        //-->

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="sys" class="ztree"></ul>

    </div>

</div>

</BODY>

</HTML>

2.效果

javascript入门 之 ztree（二 标准json数据）的更多相关文章

  1. C#的百度地图开发(二)转换JSON数据为相应的类

    原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...

  2. MyBatis基础入门《十二》删除数据 - @Param参数

    MyBatis基础入门<十二>删除数据 - @Param参数 描述: 删除数据,这里使用了@Param这个注解,其实在代码中,不使用这个注解也可以的.只是为了学习这个@Param注解,为此 ...

  3. JavaScript入门-函数function(二)

    JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...

  4. javascript入门 之 ztree（三 简单json数据）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  5. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  6. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  7. javascript 省市区三级联动 附： json数据

    html: <label> <span>购买地址</span> <select name="PurchaseProvince" style ...

  8. python3处理不标准json数据

    keywords: python jsonsource: http://txw1958.cnblogs.com/ 先看下JSON的语法规则: JSON 语法规则JSON 语法是 JavaScript ...

  9. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

随机推荐

  1. （转）浅析epoll – epoll例子以及分析

    原文地址:http://www.cppfans.org/1419.html 浅析epoll – epoll例子以及分析 上篇我们讲到epoll的函数和性能.这一篇用用这些个函数,给出一个最简单的epo ...

  2. go例子(一) 使用go语言实现linux内核中的list_head

    package list 代码 package list import ( "fmt" ) // 数据接口 type ElemType interface{} // 节点 type ...

  3. JDBC封装-Java（新手）

    JDBC的封装,自己总结的自己总结的自己总结的 dao (代码分层)命名规范: 1.com.XXX.dao 存放dao相关的类型 例如 StudentDAOImpl 处理 数据库的链接 存取数据 2. ...

  4. 最小生成树的Prim算法以及Kruskal算法的证明

    Prime算法的思路:从任何一个顶点开始,将这个顶点作为最小生成树的子树,通过逐步为该子树添加边直到所有的顶点都在树中为止.其中添加边的策略是每次选择外界到该子树的最短的边添加到树中(前提是无回路). ...

  5. IDENTITY_INSERT 设置为 OFF 时，不能为表中的标识列插入显式值 的解决方法一例

    如题 IDENTITY_INSERT 设置为 OFF 时,不能为表中的标识列插入显式值 很多网上的文章是设置表的 IDENTITY_INSERT 为 ON EF中还要对模型就行设置 [Column(N ...

  6. 【2019牛客暑期多校第三场】J题LRU management

    题目链接 题意 好吧,这道题我其实看都没看过,队友跟我说了说这道题是模拟题,卡时间.然后我就上了-- 大致就是维护一个线性表,然后有两种操作:插入.查询 插入时,如果这个值(string)之前出现过, ...

  7. Nuget多项目批量打包上传服务器的简明教程

    本篇不会介绍Nuget是什么,如何打包上传Nuget包,怎么搭建私有Nuget服务器.这些问题园子里都有相应的文章分享,这里不做过多阐述.另外本文假设你已经下载了Nuget.exe,并且已经设置好了环 ...

  8. linux execl()函数 关于execl()函数族的用法不在赘述，

    linux execl()函数 关于execl()函数族的用法不在赘述, linux 网络编程 1---(基本概念) 1.TCP和UDP协议 共同点:同为传输层协议 不同点: TCP:有连接,可靠 U ...

  9. 使用Keras进行深度学习：（六）LSTM和双向LSTM讲解及实践

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 介绍 长短期记忆(Long Short Term Memory, ...

  10. Activiti7流程定义

    一.什么是流程定义 流程定义是线下bpmn2.0标椎去描述业务流程,通常使用activiti-explorer(web控制台)或 activiti-eclipse-designer 插件对业务流程进行 ...