<!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. win10安装ubuntu子系统和图形界面

    子系统可以很方便的调用windows的文件(在/mnt里就有各个盘),也可以在windows里用VScode编辑linux的文件.还是很方便的.也可以切出去用QQ微信. 安装子系统参考教程:https ...

  2. JavaScript进阶之高阶函数篇

    JavaScript进阶之高阶函数篇 简介:欢迎大家来到woo爷说前端:今天给你们带来的是JavaScript进阶的知识,接下来的系列都是围绕着JavaScript进阶进行阐述:首先我们第一篇讲的是高 ...

  3. 选择tomcat时候提示Project facet Java version 1.8 is not supported.解决办法

    是因为jdk版本不一致导致的,如何解决? 方法一: 选中项目Properties,选择Project Facets,右击选择Java,Change Version 方法二: 在项目的目录下有一个.se ...

  4. 保姆级教程！手把手教你使用Longhorn管理云原生分布式SQL数据库！

    作者简介 Jimmy Guerrero,在开发者关系团队和开源社区拥有20多年的经验.他目前领导YugabyteDB的社区和市场团队. 本文来自Rancher Labs Longhorn是Kubern ...

  5. Java锁的深度化--重入锁、读写锁、乐观锁、悲观锁

    Java锁 锁一般来说用作资源控制,限制资源访问,防止在并发环境下造成数据错误 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized(重量级) 和 Reentr ...

  6. VScode配置CMD本地运行环境(2.0)

    VScode配置CMD本地运行环境(2.0) 官方Task.json说明 完整的Task.json配置信息 Task.json预定义变量 看了很多网上的教程都说需要下载VScode的python插件, ...

  7. scapy学习笔记

    1.ACK Scan >>>ans,unans=sr(IP(dst="www.baidu.com")/TCP(dport=[80,666],flags=" ...

  8. 【面试QA-基本模型】LSTM

    目录 为什么传统 CNN 适用于 CV 任务,RNN 适用于 NLP 任务 RNN 原理 LSTM 原理 GRU 原理 RNN BPTT LSTM 如何解决 RNN 的梯度消失问题 怎样增加 LSTM ...

  9. 向Hive中传入变量的方式

    Hive向程序中传递变量的方式 暴力替换 字符串替换 正则替换 模板引擎 系统环境变量 shell环境变量:${env:varname} system系统变量:${system:varname} hi ...

  10. linux入门系列20--Web服务之LNMP架构实战

    作为本入门系列最后一篇文章,将演示如何在CentOS7环境下搭建LNMP环境来构建个人博客网站. 常见搭建网站的方式有LAMP.LNMP.IIS.Nginx.Tomcat等等,本文演示比较流行的基于L ...