ztree树形插件

在开发项目中需要用到树插件，近期研究了几款树插件，好记性不如烂笔头，写下来以后好查

MzTreeView(梅花雪) 很经典的树形菜单脚本控件菜单树展示加载速度快支持1w条以上大数据

缺点--不能动态修改刷新兼容性不好官网没有再继续维护

最近因开发需求在寻找开源树形插件研究了一下ztree --jQuery 树插件，很不错的一款树形插件关键是兼容性比较好

网址：http://www.ztree.me/v3/main.php#_zTreeInfo

zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

后续继续更新自己研究的内容

由于官网的Demo 异步都是用php代码编写，于是自己动手了写了几个简单的Demo

1、只作树的展示（异步）使用的是简单树

脚本：需要引用JQuery、jquery.ztree.core-3.5.js 类库

 1  function setting() {
 2             var setting = {
 3                 data: {
 4                     view: {
 5                         dblClickExpand: false
 6                     },
 7                     simpleData: {
 8                         enable: true
 9                     }
10                 },
11                 async: {
12                     enable: true,
13                     url: "GetTreeData.aspx",
14                     autoParam: ["id", "name", "level"],
15                     otherParam: { "otherParam": "zTreeAsyncTest", "Method": "GetTreeData", "casetype": $("input:radio:checked").val() },
16                     dataFilter: filter
17                 },
18                 callback: {
19                     beforeClick: beforeClick
20 
21                 }
22             };
23             return setting;
24         }
25 
26 
27         function filter(treeId, parentNode, childNodes) {
28             if (!childNodes) return null;
29             for (var i = 0, l = childNodes.length; i < l; i++) {
30                 childNodes[i].name = childNodes[i].name.replace(/.n/g, '.');
31             }
32             return childNodes;
33         }
34 
35         //单击进行刷新
36         function beforeClick(treeId, treeNode) {
37             var check = (treeNode && !treeNode.isParent);
38             //如果是父节点单击打开子节点
39 
40             if (!check) {
41                 var zTree = $.fn.zTree.getZTreeObj("tree");
42                 //只展开本节点的第一级子节点
43                 zTree.expandNode(treeNode, true, false, true);
44 
45                 //可通过单击进行刷新和展开
46                 //                if (treeNode.zAsync) {
47                 //                   //已经异步加载过的强制重新加载（刷新）
48                 //                    zTree.reAsyncChildNodes(treeNode, "refresh", null);
49                 //                }
50                 //                else {
51                 //单击展开
52                 //                     zTree.expandNode(treeNode, true, true, true);
53                 //                }
54             }
55             return true;
56         }
57 
58         $(document).ready(function () {
59             $.fn.zTree.init($("#tree"), setting());
60 
61             $("input:radio").change(function () {
62                 $.fn.zTree.init($("#tree"), setting());
63             });
64 
65             //刷新
66             $("#btnrefresh").click(function () {
67                 var zTree = $.fn.zTree.getZTreeObj("tree");
68                 var selectednotes = zTree.getSelectedNodes();
69                 //获取的是集合
70                 //必须通过循环进行加载获取选中的子节点
71                 for (var i = 0, l = selectednotes.length; i < l; i++) {
72                     //                    alert(selectednotes[i].name);
73                     zTree.reAsyncChildNodes(selectednotes[i], "refresh", null);
74                 }
75 
76             });
77 
78         });

前台页面：

做一个可以切换的树

<input type="radio" value="USECASE" name="ustype" id="usecase" checked="checked" />用例
    <input type="radio" value="CR" name="ustype" id="CR" />CR &nbsp;&nbsp;
    <img src="../../../Images/reload.png" id="btnrefresh" style="cursor: pointer" />
    <fieldset style="overflow: auto" style="height: 500px">
        <div class="zTreeDemoBackground left">
            <ul id="tree" class="ztree">
            </ul>
        </div>
    </fieldset>

后台请求数据页面处理：

GetTreeData.aspx

//根据请求的数据拼接代码生成Json对象

 1  protected void Page_Load(object sender, EventArgs e)
 2     {
 3         if (!LTMS.BLL.PRM.UserInfo.CheckUserLogin(Page, out _LoginUser)) { return; }
 4 
 5         if (Request.Params["id"] != null)
 6         {
 7             ID = Request.Params["id"].ToString();
 8         }
 9         else
10         {
11             ID = "0";
12         }
13 
14 
15         if (Request.Params["level"] != null)
16         {
17             Level = Request.Params["level"].ToString();
18         }
19         else
20         {
21             Level = "-1";
22         }
23 
24         if (Request.Params["Method"] != null)
25         {
26             Method = Request.Params["Method"].ToString();
27         }
28 
29         if (Request.Params["casetype"] != null)
30         {
31             CaseType = Request.Params["casetype"].ToString();
32         }
33 
34         //映射
35         Type type = this.GetType();
36         MethodInfo method = type.GetMethod(Method);
37         if (method != null)
38         {
39             method.Invoke(this, null);
40         }
41     }
42 
43 
44   /// <summary>
45     /// 获取用例库
46     /// </summary>
47     /// <returns></returns>
48     public void GetTreeData()
49     {
50         IList<SWT_UseCase_Module_Model> _infos;
51         StringBuilder jsonstr = new StringBuilder();
52 
53         if (Level == "-1")
54         {
55             //用例库顶级大节点，需要经权限筛选
56             _infos = UseCaseModule.GetListArray("UseCase", 1, _LoginUser, CaseType, "");
57             //_infos = UseCaseModule.GetListArray("UseCase", _LoginUser);
58         }
59         else
60         {
61             //非用例库顶级大节点，无需权限筛选
62             //_infos = UseCaseModule.GetTreeData(Convert.ToInt64(ID));
63             _infos = UseCaseModule.GetListArray(new string[] { "MODULE_FATHERID=" + ID });
64         }
65 
66         ///创建资讯树
67         string url = "ModuleContent.aspx?id=";
68 
69         foreach (SWT_UseCase_Module_Model _mode in _infos)
70         {
71             //换行需要json转义
72             jsonstr.AppendFormat("{{"id":{0},"name":"{1}","pId":{2},"url":"{3}","target":"{4}"", _mode.Module_ID, _mode.Module_Name.Replace("
", " ").Replace("
", " "), _mode.Module_FatherID, url + _mode.Module_ID + "&Type="+CaseType, "mid_frame");
73             if (UseCaseModule.ExistsBywhere("MODULE_FATHERID=" + _mode.Module_ID))
74             {
75                 jsonstr.Append(",isParent:true");
76             }
77             jsonstr.Append("},"); 
78         }
79 
80         //移除最后一个,
81         if (jsonstr.ToString().EndsWith(","))
82         {
83             jsonstr = jsonstr.Remove(jsonstr.Length-1, 1);
84         }
85        
86         _infos = null;
87         Response.Write("["+jsonstr.ToString()+"]");
88 
89     }

View Code

2、用户搜索树控件
难点：ztree 在demo中的搜索只将搜索结果加粗显示跟预期结果显示查询的结果不一致解决这个问题，我采用的方式是将树清空重新加载查询结果

主要是脚本页面

   function dblClickExpand(treeId, treeNode) {
            return treeNode.level > 0;
        }

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/.n/g, '.');
            }
            return childNodes;
        }

        //查询
        function search() {
            //搜索框为空时，重新绑定
            if ($("#username").val() == "") { $.fn.zTree.init($("#tree"), setting()); return; }
            //异步加载
            $.ajax({
                url: "../Control/GetNodes.aspx",
                //             url:"../Control/GetNodes.ashx",
                type: "post",
                dataType: "text",
                async: true,
                data: { "command": "GetSearchNodes", "group": $("input:radio:checked").val(), "username": $("#username").val() },
                beforeSend: function () { $("#search").attr("disabled", "disabled").val("搜索中..."); },
                success: function (data) {
                    //eval将返回来的json字符串转换成json对象
                    var json = eval(data);
                    $.fn.zTree.init($("#tree"), setting(), json);

                },
                error: function (textStatus, errorThrown) {
                    //请求出错处理
                    alert("错误：" + textStatus + errorThrown.toString());
                },
                complete: function () {
                    $("#search").attr("disabled", "").val("搜索");
                }
            });
        }

        //动态添加的元素不会有加载原来的脚本的事件 需要手动添加onclick事件
        function deleteNodes(btnDelete) {
            //parents过滤
            $(btnDelete).parents("li").remove();
        }

        function beforeClick(treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);
            //如果是父节点单击打开子节点
            if (!check) { var zTree = $.fn.zTree.getZTreeObj("tree"); zTree.expandNode(treeNode, null, true, true); }
            //            alert("只能选择人员..."); 
            return check;
        }

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree"),
            nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                //cursor:pointer; CSS 2.0 标准 google支持
                v += "<li><span style='cursor:pointer;'><div class='selectednodes' onclick='deleteNodes(this)'>" + nodes[i].name + "<div></span></li>";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var SelectedObj = $("#selected");
            SelectedObj.html(SelectedObj.html() + v);
        }

        //将设置转换成函数 --好处：设置参数里面有变量 ，可以定时获取最新的
        function setting() {
            var setting = {
                data: {
                    view: {
                        dblClickExpand: false
                    },
                    simpleData: {
                        enable: true
                    }

                },
                async: {
                    enable: true,
                    //                url:"../Control/GetNodes.ashx",
                    url: "../Control/GetNodes.aspx",
                    autoParam: ["id", "name", "level"],
                    otherParam: { "otherParam": "zTreeAsyncTest", "command": "GetChildrenNodes", "group": $("input:radio:checked").val(), "username": $("#username").val() },
                    dataFilter: filter
                },
                callback: {
                    beforeClick: beforeClick,
                    onClick: onClick


                }

            };
            return setting;
        }


        $(document).ready(function () {
            //过滤掉其他没用的enter
            //            document.onkeydown = function () {
            //                if (event.srcElement.type != 'button' &&
            //  event.srcElement.type != 'image' && event.srcElement.type != 'submit'
            //  && event.srcElement.type != 'textarea' && event.keyCode == 13)
            //                { event.keyCode = 9; }

            //            }

            $(document).keydown(function () {
                if (event.srcElement.type != 'button' &&
                  event.srcElement.type != 'image' && event.srcElement.type != 'submit'
                  && event.srcElement.type != 'textarea' && event.keyCode == 13)
                { event.keyCode = 9; }
            });

            //初始化
            $.fn.zTree.init($("#tree"), setting());

            //查询
            $("#search").click(function () {
                search();
                //                if ($("#username").val() == "") { $.fn.zTree.init($("#tree"), setting()); return; }
                //                $.fn.zTree.init($("#tree"), setting());
                //                var zTree = $.fn.zTree.getZTreeObj("tree");
                //异步加载全部
            });


            $("#username").keydown(function () {
                if (event.keyCode == 13) {
                    search();
                }
            });

            $("#btnOK").click(function () {
                $("#hidden").val($("#selected").text().replace(/.n/g, '').replace(" ", ','));
                alert($("#selected").text().replace(/.n/g, '').replace(" ", ','));
            });

            $("input:radio").change(function () {
                //重置成空
                $("#username").val("");
                $("#selected").html("");
                //重新加载
                $.fn.zTree.init($("#tree"), setting());
            });

        });

View Code

Html页面

<fieldset style=" 700px">
        <div>
            <input id="MIDH" type="radio" name="group" value="1" />类别1
            <input id="SYS" type="radio" name="group" value="2" checked="checked" />类别2
                   </div>
        <div>
            <input type="text" style="float: left" id="username" />
            <input type="button" value="搜索" id="search" />
            <ul id="tree" class="ztree" style="float: left">
            </ul>
            <ul id="selected" class="ztree" style="float: left">
            </ul>
        </div>
    </fieldset>
    <br />
    <input type="button" id="btnOK" value="确定" />
    <input type="hidden" id="hidden" />

View Code

以上是我个人研究的一些东西写出来跟大家分享一下，有不合理的地方还望指正

作者：雨的点滴

　　出处：http://www.cnblogs.com/yudeyinji/articles/3488269.html

　　欢迎转载，但须保留版权