<!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. Windows Server 2012 R2 域证书服务搭建

    网管大叔说要给每个人颁发一个证书,这个证书很耗电 1.在服务器管理器中添加角色和功能 下一步 下一步 勾选Active Directory证书服务 下一步 下一步 勾选证书颁发机构,证书颁发机构Web ...

  2. 使用vue-router+vuex进行导航守卫(转)

    前言:想要实现登录后才能进入主页等其他页面,不然都会跳转到登录页.但是Vuex有个不够完美的地方,一旦刷新页面就会没了,所以还要用到localStorage. 一.router.js: import ...

  3. [转]【maven】解决Missing artifact jdk.tools:jdk.tools:jar:1.6

    解决在pom.xml文件中出现的Missing artifact jdk.tools:jdk.tools:jar:1.6问题 <dependency> <groupId>jdk ...

  4. android studio 添加GSON

  5. python对齐输出

    这个问题烦恼了挺久,一般情况下我都是用\t解决,但其实这样的办法并不是很nice,然后今天在写一个demo的时候实在看不下去,就百度科普了一波,确实是有比较nice的解决方案. 像这样: 令人十分难受 ...

  6. Linux 基础篇（二）

    1.linux 关机和重启 关机: shutdown  -h  10:20  # 指定时间关机 shutdown -h now    # 马上关机 shutdown -h +10  # 10分钟后关机 ...

  7. POJ1780 欧拉路+手写栈解决爆战问题

    题目链接:http://poj.org/problem?id=1780 本题中给出一个位数n,要求给出一个10^n+n-1位数的数,要求每个n位的数都要在里面出现,一个n位的数一共有10^n种,我们容 ...

  8. 毕业设计——基于ZigBee的智能窗户控制系统的设计与实现

    题目:基于物联网的智能窗户控制系统的设计与实现 应用场景:突降大雨,家里没有关窗而进水:家中燃气泄漏,不能及时通风,威胁人身安全,存在火灾的隐患:家中窗户没关,让坏人有机可乘.长时间呆在人多.封闭的空 ...

  9. IDEA编写 Scala时没有语法检查和错误提示

    #问题描述 在IDEA中写scala程序时,一些明显的语法错误不进行检查,没有像写Java时的红线什么的,当编译运行时,编译失败. https://blog.csdn.net/weizheng1000 ...

  10. doc-指令-查看端口是否被占用及占用程序

    来源:http://www.blogjava.net/huozhicheng/archive/2011/09/27/359620.html 1.首先进入命令行 查看端口是否被占用 使用命令: nets ...