zTree理解和简单Demo（转）

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


代码是。


[html] view plain copy
 print?
  1. <span style="font-family:Verdana;font-size:18px;"><span style="font-family:Verdana;font-size:18px;">$(document).ready(function () {  
  2.   
  3. zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);}  
  4.   
  5. );  
  6. </span></span>  


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


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


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


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


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


       zTree的实现思路是这样的：


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


[html] view plain copy
 print?
  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>  

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


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


      3. 给zNodes赋值。


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


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

 

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

【Demo】

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




效果：





posted @ 2017-08-15 18:24  星朝  阅读(666)  评论(0)  编辑  收藏  举报