zTree用法

声明：笔者刚刚当程序员，有误请包涵

zTree树形结构前端控件
官网 http://www.ztree.me/v3/main.php#_zTreeInfo
这是个非常灵活的树形控件，有很多款式，非常好用
如图1

使用这个控件有以下步骤：
第一，到官网上下载插件，放到你的工程里面
如图2


第二，在页面中引入了js和css之后就可以写代码了，
我把最简单的例子贴出来：



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="First.aspx.cs" Inherits="ZTreeTest1.WebForm1" %>




   

   
   
   
   

   
   

   



   

   

       
       

   

   

运行结果如图3


注释：
我们先看到html部分，
页面只有一个input和一个ul
ul是用来作为树形结构的载体
input是用来显示东西

然后我们看到js部分
这里可以分为3块，

第一块是setting：树形结构的配置

第二块是zNodes：节点的json
这串长长的json有三个特点：1有独一无二的id；有父节点id（pId）；有名字（name）
到时候你自己的程序后台就可以返回一系列带有该结构的json
就可以显示你想要的内容。具体一点就是用$.getJson
例如：
 $.getJSON("返回json的地址", function (data) {

                var t = $("#tree");
                t = $.fn.zTree.init(t, setting, data);
            })//end get json



第三块：初始化 $.fn.zTree.init


这个控件可能用起来最麻烦的就是取构造那个treeNode的json
慢慢拼，还是可以拼出来的！！！！



最后贴一段带有checkbox的树形结构（很常用）
注意记得引入 jquery.ztree.excheck-3.5.js

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Third.aspx.cs" Inherits="ZTreeTest1.Third" %>




   
   
   
   
   

   
   
   
   

   


   

   
    
   
   

   

    
   

贴图4：