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. 【tomcat系列】详解tomcat架构(上篇)

    java中,常用的web服务器一般由tomcat,weblogic,jetty,undertwo等,但从用户使用广泛度来说,tomcat用户量相对比较大一些,当然这也基于它开源和免费的特点. 从软件架 ...

  2. vue-element-admin中是如何配置浏览器中的页面标题

    因为在vue-element-admin中杈哥是写个一个动态路由标题,就是说你点进那个页面,它会显示对应页面的标题,所以我们仅仅在index页面进行修改是没有用的,那么我们改如何修改呢? 找到perm ...

  3. Airport Simulation (数据结构与算法 – 队列 / Queue 的应用)

    Airport Simulation 是数据结构与算法教材中用于演示Queue的一个小程序(大多数教师似乎会跳过这个练习).主程序会通过输入总的运行时间.队列里可以等待的最多飞机数量,平均每个时间单元 ...

  4. 爬虫 | cnblog文章收藏排行榜(“热门文摘”)

    目录 需要用的module 单页测试 批量抓取 数据保存 背景说明 因为加入cnblog不久,发现上面有很多优秀的文章. 无意中发现cnblog有整理文章的收藏排行榜,也就是热门文摘. 不过有点坑的是 ...

  5. [Linux][C][gcc] Linux GCC 编译链接 报错ex: ./libxxx.so: undefined reference to `shm_open'

    本人原创文章,文章是在此代码github/note的基础上进行补充,转载请注明出处:https://github.com/dramalife/note. 以librt丶用户自定义动态库libxxx 和 ...

  6. hdu1455 拼木棍（经典dfs）

    给定木棍序列,求解能将木棍拼成相同长度的数根长木棍的情况下长木棍长度的最小值. /*hdu1455dfs */ #include<bits/stdc++.h> using namespac ...

  7. MySQL----SQL操作

    1.什么是SQL? Structured Query Language:结构化查询语言 其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为“方言”. 2.SQL通用 ...

  8. CF230B T-primes 题解

    原题链接 简要题意: 判断一个数是否只有 \(3\) 个因数. 首先,如果一个数有奇数个因数,那么这个数是完全平方数. 道理很简单:因数是成对的,那么必然存在 \(k^2 = n\),此时 \(k\) ...

  9. Nginx做负载均衡的几种轮询策略

    集群环境为了解决单点无法支撑高并发的情况,集群采用多台服务器提供服务,一般在集群中使用nginx 将来自客户端的请求转发给服务器端 nginx负载均衡可用提高网站的吞吐量,缓解单台服务器的压力. 一. ...

  10. 理解卷积神经网络中的输入与输出形状(Keras实现)

    即使我们从理论上理解了卷积神经网络,在实际进行将数据拟合到网络时,很多人仍然对其网络的输入和输出形状(shape)感到困惑.本文章将帮助你理解卷积神经网络的输入和输出形状. 让我们看看一个例子.CNN ...