<!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. 【Weiss】【第03章】练习3.19：计算后缀表达式

    [练习3.19] 编写一个程序计算后缀表达式的值. Answer: 计算的方法书上说得很明白了,看代码行,没写错误检测[因为懒]. 测试代码: #include <iostream> #i ...

  2. python高阶函数&异常处理

    高阶函数 1.什么是高阶函数 在Python中,变量可以指向函数 函数名也是变量 既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. ma ...

  3. Journal of Proteome Research | 人类牙槽骨蛋白的蛋白质组学和n端分析:改进的蛋白质提取方法和LysargiNase消化策略增加了蛋白质组的覆盖率和缺失蛋白的识别 | (解读人：卜繁宇)

    文献名:Proteomic and N-Terminomic TAILS Analyses of Human Alveolar Bone Proteins: Improved Protein Extr ...

  4. Journal of Proteomics Research | 自动的、可重复的免疫多肽数据分析流程MHCquant

    题目:MHCquant: Automated and reproducible data analysis for immunopeptidomics 期刊:Journal of Proteome R ...

  5. NIO的原理和文件读入读出及图片拷贝的使用

    1.NIO的简介        java.nio 全称 java non-blocking IO 是jdk1.4之后出现的 New IO        为所有的原始类型(boolean除外)提供了缓存 ...

  6. Spring Data JPA 自定义对象接收查询结果集

    Spring Data JPA 简介 Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套JPA应用框架,可使开发者用极简的代码即可实现对数据库的访问和 ...

  7. Spring优雅整合Redis缓存

    “小明,多系统的session共享,怎么处理?”“Redis缓存啊!” “小明,我想实现一个简单的消息队列?”“Redis缓存啊!” “小明,分布式锁这玩意有什么方案?”“Redis缓存啊!” “小明 ...

  8. linux bash吧，还有啥Bourne Again Shell

    linux bash吧,还有啥Bourne Again Shell bash吧,还有啥Bourne Again Shell 头部要写#!/bin/bash set -x #open script de ...

  9. “GANs”与“ODEs”：数学建模的终结？

    在本文中,我想将经典数学建模和机器学习之间建立联系,它们以完全不同的方式模拟身边的对象和过程.虽然数学家基于他们的专业知识和对世界的理解来创建模型,而机器学习算法以某种隐蔽的不完全理解的方式描述世界, ...

  10. Mysql性能优化：如何给字符串加索引？

    导读 现代大部分的登录系统都支持邮箱.手机号码登录两种方式,那么如何在邮箱或者手机号码这个字符串上建立索引才能保证性能最佳呢? 今天这篇文章就来探讨一下在Mysql中如何给一个字符串加索引才能达到性能 ...