<!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. js 渐变运动框架

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. IOptions、IOptionsMonitor以及IOptionsSnapshot

    背景 ASP.NET Core引入了Options模式,使用类来表示相关的设置组.简单的来说,就是用强类型的类来表达配置项,这带来了很多好处.初学者会发现这个框架有3个主要的面向消费者的接口:IOpt ...

  3. Natas16 Writeup（正则匹配，php命令执行）

    Natas16: 源码如下 <? $key = ""; if(array_key_exists("needle", $_REQUEST)) { $key ...

  4. 用sort 排序

    这两天看了一个比较好的sort总结,所以转载了一下 阅读目录 1.sort 2.sort简介 3.sort扩展 1.sort 使用:#include <algorithm>   using ...

  5. vue封装axios

    一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...

  6. Linux下MySQL的数据库安装

    centos7 + mysql5.7 tar包解压安装 先执行wget https://dev.mysql.com//Downloads/MySQL-5.7/mysql-5.7.18-linux-gl ...

  7. python之路 2020/2/18

    这是第一篇随笔,记录今天的内容,我不知道什么是成功,因为我没有成功过,但是,我想成功一次! python 多练吧! 一.编程语言的分类 机器语言:01001010,高低电平,计算机懂的语言. 汇编语言 ...

  8. 分库分表实践-Sharding-JDBC

    最近一段时间在研究分库分表的一些问题,正好周末有点时间就简单做下总结,也方便自己以后查看. 关于为什么要做分库分表,什么是水平分表,垂直分表等概念,相信大家都知道,这里就不在赘述了. 本文只讲述使用S ...

  9. python—json

    一.json数据类型:是字符串 # json通用数据类型,所有语言都可以用 # {k-v}形式存在,里面只能用双引号"" # 定义json字符串,要用'''{}'''格式 #htt ...

  10. windows远程桌面内部错误的处理方法

    远程桌面内部错误的处理方法 1 执行:netsh winsock reset 2 重启网络连接 3 重启远程连接服务 remote Desktop Services 4 关闭连接警告 高级 -> ...