zoukankan      html  css  js  c++  java

  • 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>  




    效果：
  • 相关阅读:
    LeetCode Merge Two Sorted Lists 归并排序
    LeetCode Add Binary 两个二进制数相加
    LeetCode Climbing Stairs 爬楼梯
    034 Search for a Range 搜索范围
    033 Search in Rotated Sorted Array 搜索旋转排序数组
    032 Longest Valid Parentheses 最长有效括号
    031 Next Permutation 下一个排列
    030 Substring with Concatenation of All Words 与所有单词相关联的字串
    029 Divide Two Integers 两数相除
    028 Implement strStr() 实现 strStr()
  • 原文地址：https://www.cnblogs.com/jpfss/p/7366759.html
Copyright © 2011-2022 走看看