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. javaScript 基础知识汇总（八）

    1.Map Set WeakMap 和WeakSet Map 是一个键值对的集合,主要的方法包括: new Map() 创建Map map.set(key,value)  根据键(key)存储值(va ...

  2. Html的总结(待完善)

    Html的总结(待完善) 框内文字 Placeholder 框内文字(例如:请输入密码) A标签 link 未点击的A标记 visited 点击过的A标签 hover 放置鼠标变颜色 active 点 ...

  3. MyBatis框架——缓存机制

    使⽤缓存机制的作⽤也是减少 Java 应⽤程序与数据库的交互次数,从⽽提升程序的运⾏效率. ⽐如第 ⼀次查询出某个对象之后,MyBatis 会⾃动将其存⼊缓存,当下⼀次查询同⼀个对象时,就可以直接从 ...

  4. ElegantSnap 一个优雅的，易用的iOS/tvOS/macOS自动布局框架, 超级详细的使用教程，多视图水平等宽/垂直等高排列

    ElegantSnap ElegantSnap(Base on SnapKit) to make Auto Layout easy and elegant on both iOS and OS X. ...

  5. IOS抓包工具Stream——让移动端的抓包变得轻而易举

    有一天下晚班回家,在地铁上的时候,开发发来信息说,能不能把之前创建的bug再抓包看下数据.顿时心里就想,在地铁上,我上哪抓包去.之后百度了下,发现ios有一款非常实用的抓包工具,大家可以上App St ...

  6. VUE axios请求 封装 get post Http

    创建httpService.js 文件 import axios from 'axios'; import { Loading , Message } from 'element-ui'; impor ...

  7. 为什么我推荐你用Ubuntu开发？

    前言: 鱼哥在做多媒体开发时,领导倒逼我们用Ubuntu开发,后来才发现它的牛逼和高效.所以对于还在用Windows上开发的朋友,鱼哥建议,趁周末,搞个双系统,切到Ubuntu上开发, Ubuntu最 ...

  8. .gitignore排除（不忽略）二级以上目录下的文件或目录

    在.gitignore中,结合使用/*和!filename的语法,可以达到除特定文件或目录外全部忽略的目的.但当希望不忽略的文件或目录在二级或多级目录下时,如果这样写 /* !/sub/subsub/ ...

  9. CF1324E Sleeping Schedule 题解

    原题链接 简要题意: 每次可以将 \(a_i\) 减 \(1\) 或不变.求让 \(a_i\) 的前缀和 \(\% h\) 的值在 \([l,r]\) 区间中的最多的个数. E题是个水dp,也不怎样 ...

  10. [Flink] Flink的waterMark的通俗理解

    导读 Flink 为实时计算提供了三种时间,即事件时间(event time).摄入时间(ingestion time)和处理时间(processing time). 遇到的问题: 假设在一个5秒的T ...