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. Ubuntu下实现歌词解析

    我们要明确目的,实现歌曲歌词同步. 1.将歌词文件一次性去取到内存中.(以周董的“简单爱”为例) a.用fopen打开歌词文件 FILE *fp  = fopen(“简单爱.lrc”,"r& ...

  2. vscode 自动修复 setting.json 修改完，得重启浏览器 # 新版（>1.41.0）配置 vscode #解决了

    vscode 自动修复 setting.json 修改完,得重启浏览器,不用 npm run dev 就能看到效果 "editor.codeActionsOnSave": { &q ...

  3. DIV常用属性大全

    目录 一.属性列表 二.常用属性 三.一些特殊效果 四.定位和控制 一.属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt ...

  4. nopcommerce4.0 安装步骤

    前言:近期因工作要求接触nopcommerce,最新版本为4.0,以下所有安装都是基于此版本.接下来我可能会写一系列,为了让自己更好的掌握,也希望能帮助到大家 好记性不如烂笔头,新手也可以避免走我的弯 ...

  5. 高效code review指南

    大多数程序员都知道并且相信code review(代码审查)的重要性,但并一定都能很好的执行这一过程,做好code review也需要遵循一定的原则.流程和规范. 我们团队的code review实践 ...

  6. 16. nested exception is com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field "auditUnitName"

    org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver:handleHttpMessageNotRead ...

  7. PHP7内核（六）：变量之zval

    记得网上流传甚广的段子"PHP是世界上最好的语言",暂且不去讨论是否言过其实,但至少PHP确实有独特优势的,比如它的弱类型,即只需要$符号即可声明变量,使得PHP入手门槛极低,成为 ...

  8. PIGS POJ - 1149网络流（最短增广路---广搜） + 建图

    题意: 第一行输入m和n,m是猪圈的数量,n是顾客的数量,下面n行 第 i+1行表示第i个顾客 , 输入第一个数字表示有几把猪圈的钥匙,后面输入对应的猪圈,最后一个数字输入顾客想买几头猪. 建图: 设 ...

  9. iOS 性能优化点

    用 ARC 管理内存 在正确的地方使用 reuseIdentifier 尽量把 views 设置为完全不透明 如果你有透明的 Views 你应该设置它们的 opaque(不透明)属性为 YES.例如一 ...

  10. iOS hash

    一.iOS hash 下图列出 Hash 在 iOS 中的应用分析整理 知乎上的一句话: 算法.数据结构.通信协议.文件系统.驱动等,虽然自己不写那些东西,但是了解其原理对于排错.优化自己的代码有很大 ...