zTree是利用 jQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。整个zTree的页面显示核心

代码是。

  1. <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;">$(document).ready(function () {
  2. zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);}
  3. );
  4. </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;">$(document).ready(function () {

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);}

);


</span></span>

解释：#treeDemo是html用于显示的zTree容器。

Setting   是JavaScript脚本中用于定义树的显示结构样式。

zNodes   用于填充Setting中定义的树的数据源。

个人理解：zTree的实现就是用setting把树的模型结构定义好，然后用zNodes当数据源，把数据浇灌到这个树

结构中，最后用这个被填满的树印在html中的zTree容器中，用于显示出来。

zTree的实现思路是这样的：

1. 在HTML页面定义一个zTree容器，也就是我们所说的<div>。

  1. <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><body>
  2. <form id="form1" runat="server">
  3. <div>
  4. <ul id="treeDemo" class="ztree"></ul>
  5. </div>
  6. </form>
  7. </body>
  8. </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><body>

    <form id="form1" runat="server">

    <div>

    <ul id="treeDemo" class="ztree"></ul>

    </div>

    </form>

</body>

</span></span>

2.在javascript中进行setting的配置。

简单来说就是我们想要的树的样式、事件、访问路径、有无勾选、有无连线等属性。

3. 给zNodes赋值。

zNodes是树的全部节点数据集合，采用json对象组成的数据结构。

备注：当然这一切都要建立在引用了相应的js 和CSS。

zTree v3.5.21 下载地址：http://www.ztree.me/v3/demo.PHP#_101

【Demo】

  1. <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="树结构.tree" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>ZtreeDemo</title>
  7. <link href="Script/zTree/css/demo.css" rel="stylesheet" />
  8. <link href="Script/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
  9. <script src="Script/zTree/js/jquery-1.4.4.min.js"></script>
  10. <script src="Script/zTree/jquery.ztree.core-3.5.js"></script>
  11. <script language="JavaScript">
  12. //进行setting设置；
  13. var setting = {
  14. treeNodeKey: "id",               //在isSimpleData格式下，当前节点id属性
  15. treeNodeParentKey: "pId",        //在isSimpleData格式下，当前节点的父节点id属性
  16. showLine: true,                  //是否显示节点间的连线
  17. checkable: true                //每个节点上是否显示 CheckBox
  18. };
  19. //进行zNodes的设置，对它进行赋值，也可以从后台获取，为方便在这里采用直接赋值；
  20. var zNodes = [
  21. {
  22. name: "父节点1", open: true, children: [
  23. { name: "子节点1" }, { name: "子节点2" }]
  24. },
  25. {
  26. name: "父节点2", open: true, children: [
  27. { name: "子节点1" }, { name: "子节点2" }]
  28. }
  29. ];
  30. //页面加载后，将zNodes数据放到setting设置的树结构中，显示在html中id=treeDemo的容器中。
  31. $(document).ready(function () {
  32. zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. <form id="form1" runat="server">
  38. <div>
  39. <ul id="treeDemo" class="ztree"></ul>
  40. </div>
  41. </form>
  42. </body>
  43. </html>
  44. </span></span>
<span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tree.aspx.cs" Inherits="树结构.tree" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>ZtreeDemo</title>

&lt;link href="Script/zTree/css/demo.css" rel="stylesheet" /&gt;

&lt;link href="Script/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /&gt;

&lt;script src="Script/zTree/js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;

&lt;script src="Script/zTree/jquery.ztree.core-3.5.js"&gt;&lt;/script&gt;

&lt;script language="JavaScript"&gt;

    //进行setting设置；

     var setting = {

         treeNodeKey: "id",               //在isSimpleData格式下，当前节点id属性

         treeNodeParentKey: "pId",        //在isSimpleData格式下，当前节点的父节点id属性

         showLine: true,                  //是否显示节点间的连线

         checkable: true                //每个节点上是否显示 CheckBox

     };

    //进行zNodes的设置，对它进行赋值，也可以从后台获取，为方便在这里采用直接赋值；

     var zNodes = [

     {

         name: "父节点1", open: true, children: [

           { name: "子节点1" }, { name: "子节点2" }]

     },

     {

         name: "父节点2", open: true, children: [

           { name: "子节点1" }, { name: "子节点2" }]

     }

     ];

    //页面加载后，将zNodes数据放到setting设置的树结构中，显示在html中id=treeDemo的容器中。

     $(document).ready(function () {

         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

     });




</script>


</head>


<body>


<form id="form1" runat="server">


<div>


<ul id="treeDemo" class="ztree"></ul>


</div>


</form>


</body>


</html>


</span></span>

效果：

zTree理解和简单Demo（转）的更多相关文章

  1. Django实战(一)之简单Demo

    菜鸟教程上Django安装可供参考: 参考链接: http://www.runoob.com/django/django-install.html 菜鸟教程上如果不行的话,下面博客网址可以供参考 Li ...

  2. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  3. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  4. 使用Spring缓存的简单Demo

    使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...

  5. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  6. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  7. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  8. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

  9. android JNI 简单demo（2）它JNI demo 写

    android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...

随机推荐

  1. jsp实现上一页下一页翻页功能

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...

  2. Javascript Prototype __proto__ constructor 三者的关系

    JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...

  3. [luogu P3384] 【模板】树链剖分 [树链剖分]

    题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...

  4. jenkins IOS- ad-hoc 打包

    背景 客户无大企业证书,只有开发者证书,如果进行开发分发测试只能采用两种方式 testfight ad-hoc打包 上testfight存在一定的审核时间,排除掉,最后选择打ad-hoc的包 解决 查 ...

  5. 【科普】什么是TLS1.3

    TLS1.3是一种新的加密协议,它既能提高各地互联网用户的访问速度,又能增强安全性. 我们在访问许多网页的时候,常常会在浏览器的地址栏上看到一个锁的图标,并使用"https"代替传 ...

  6. 二．GC相关之Java内存模型

    根据上节描述的问题,我们知道其最终原因是GC导致的.本节我们就先详细探讨下与GC息息相关的Java内存模型. 名词解释:变量,理解为java的基本类型.对象,理解为java new出来的实例. Jav ...

  7. Codeforces Round #427 (Div. 2)

    B. The number on the board 题意: 有一个数字,它的每个数位上的数字的和不小于等于k.现在他改变了若干位,变成了一个新的数n,问现在的数和原来的数最多有多少位不同. 思路: ...

  8. Linux 下安装jetty服务器

    jetty和我们通常使用的tomcat一样,是一个开源的servlet容器,特点是轻量易部署,一方面jetty可以作为web容器使用,另一方面也是最一般的方式是jetty以一组jar包的形式发布,所以 ...

  9. File的getParentFile()和getParent()

    代码:      File file = new File("D:\\javaemp\\code\\java.txt");      String str1 = file.getP ...

  10. Codeforces 828B Black Square（简单题）

    Codeforces 828B Black Square(简单题) Description Polycarp has a checkered sheet of paper of size n × m. ...