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

            view: {

                showLine: false,           //不显示连接线

                showIcon: showIconForTree  //不显示文件夹图标（调用showIconForTree()）

            },

            data: {

                simpleData: {

                    enable: true

                }

            }

        };

        var nodes =[

            { id:1, pId:0, name:"父节点1 - 展开", open:false},                               //根据pId参数指定父结点

            { id:11, pId:1, name:"父节点11 - 折叠"},

            { id:111, pId:11, name:"叶子节点111"},

            { id:112, pId:11, name:"叶子节点112"},

            { id:113, pId:11, name:"叶子节点113"},

            { id:114, pId:11, name:"叶子节点114"},

            { id:12, pId:1, name:"父节点12 - 折叠"},

            { id:121, pId:12, name:"叶子节点121"},

            { id:122, pId:12, name:"叶子节点122"},

            { id:123, pId:12, name:"叶子节点123"},

            { id:124, pId:12, name:"叶子节点124"},

            { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:false},

            { id:2, pId:0, name:"父节点2 - 折叠"},

            { id:21, pId:2, name:"父节点21 - 展开", open:false},

            { id:211, pId:21, name:"叶子节点211"},

            { id:212, pId:21, name:"叶子节点212"},

            { id:213, pId:21, name:"叶子节点213"},

            { id:214, pId:21, name:"叶子节点214"},

            { id:22, pId:2, name:"父节点22 - 折叠"},

            { id:221, pId:22, name:"叶子节点221"},

            { id:222, pId:22, name:"叶子节点222"},

            { id:223, pId:22, name:"叶子节点223"},

            { id:224, pId:22, name:"叶子节点224"},

            { id:23, pId:2, name:"父节点23 - 折叠"},

            { id:231, pId:23, name:"叶子节点231"},

            { id:232, pId:23, name:"叶子节点232"},

            { id:233, pId:23, name:"叶子节点233"},

            { id:234, pId:23, name:"叶子节点234"},

            { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}

        ];

        function showIconForTree(treeId, treeNode) {

            return !treeNode.isParent;

        };

        $(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>

javascript入门 之 ztree（三 简单json数据）的更多相关文章

  1. javascript入门 之 ztree（二 标准json数据）

    1.代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </T ...

  2. jQuey知识点三 解析json数据

    1.解析简单数据 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="vie ...

  3. Ace教你一步一步做Android新闻客户端（三） JSON数据解析

    对于服务器端来说,返回给客户端的数据格式一般分为html.xml和json这三种格式,现在给大家讲解一下json这个知识点, 1 如何通过json-lib和gson这两个json解析库来对解析我们的j ...

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

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

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

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

  6. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  7. javascript入门 之 ztree（五 自定义字体）

    <!--<!DOCTYPE html>--> <!--<HTML>--> <!--<HEAD>--> <!--<TI ...

  8. javascript入门 之 zTree （一）

    1.安装: 我用的bower工具,所以执行: bower install ztree 2.详细功能与配制,请考官方文档: http://www.treejs.cn/v3/main.php#_zTree ...

  9. 【Newtonsoft.Json.dll】操作简单JSON数据

    { //json数据 string json = "{\"name\":\"张三\",\"sex\":\"男\" ...

随机推荐

  1. 【转】分布式架构的演进（JavaWeb）

    作者:李小翀 链接:https://www.zhihu.com/question/22764869/answer/31277656 来源:知乎 1.初始 初始阶段 的小型系统 应用程序.数据库.文件等 ...

  2. WSGI标准、MVC和MTC框架

    WSGI服务: wsgiref模块其实就是将整个请求信息给封装了起来,就不需要你自己处理了,假如它将所有请求信息封装成了一个叫做request的对象,那么你直接request.path就能获取到用户这 ...

  3. Log4j不写入日志文件排错记录

    背景: 之前用 log4j一直设置的输出到控制台.今天由于job任务出现了异常,因为是异步的,没办法在控制台看错误信息了,于是乎决定把日志打印到文件里面.然后就找了篇博客配置了下.但是配置完后,怎么也 ...

  4. Topshelf+Quartz3.0基于控制台应用程序快速开发可调度windows服务

    1.TopShelf TopShelf是一个开源的跨平台的宿主服务框架.可通过.Net Core/.Net Framwork控制台应用程序快速开发windows服务,更加便于服务调试. 本文基于.Ne ...

  5. 201771010111-李瑞红 实验一 软件工程准备-<构建之法-现代软件工程-基础认识和理解>

    |||||||| | :--

  6. 太赞了！阿里几位工程师重写了 《Java 并发编程》

    事情是这样的,前些日子和得知一个读者在准备阿里的面试,我蛮有兴趣的跟他聊了起来,随着话题越来越深入,我发现这位读者有意思,他和几位阿里的工程师之前编写了一本 concurrent.redspider. ...

  7. Servlet(三)----Servlet体系与HTTP

    ## Servlet的体系结构 Servlet  ---  接口 | | GenericServlet  ---  抽象类 | | HttpServlet  --  抽象类 GenericServle ...

  8. 数据分析之上篇---numpy模块

    目录 一.简介 二.ndarray -多维数组对象 1.为什么要是用ndarray? 2.创建ndarray对象 3.ndarray多维数组创建 4.常用属性 5.数据类型 6.ndarray 数组创 ...

  9. 基于arduino、百度云、采用django、redis鱼缸在线监控

    大家好,今天我给大家分享一下之前做的一个鱼缸远程监控的案例,希望有人喜欢 首先给大家看一下结构框架,由于我之前买的arduino开发板不带wifi功能,所有是通过pc机转发一下上的百度云,最近我刚购买 ...

  10. Apache服务器故障排除攻略

    Apache服务器故障排除攻略 应用服务器Apache浏览器配置管理网络应用  随着网络技术的普及.应用和Web技术的不断完善,Web服务已经成为互联网上重要的服务形式之一.原有的客户端/服务器模式正 ...