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 类库

  function setting() {
             var setting = {
                 data: {
                     view: {
                         dblClickExpand: false
                     },
                     simpleData: {
                         enable: true
                     }
                 },
                 async: {
                     enable: true,
                     url: "GetTreeData.aspx",
                     autoParam: ["id", "name", "level"],
                     otherParam: { "otherParam": "zTreeAsyncTest", "Method": "GetTreeData", "casetype": $("input:radio:checked").val() },
                     dataFilter: filter
                 },
                 callback: {
                     beforeClick: beforeClick

                 }
             };
             return setting;
         }

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

         //单击进行刷新
         function beforeClick(treeId, treeNode) {
             var check = (treeNode && !treeNode.isParent);
             //如果是父节点单击打开子节点

             if (!check) {
                 var zTree = $.fn.zTree.getZTreeObj("tree");
                 //只展开本节点的第一级子节点
                 zTree.expandNode(treeNode, true, false, true);

                 //可通过单击进行刷新和展开
                 //                if (treeNode.zAsync) {
                 //                   //已经异步加载过的强制重新加载（刷新）
                 //                    zTree.reAsyncChildNodes(treeNode, "refresh", null);
                 //                }
                 //                else {
                 //单击展开
                 //                     zTree.expandNode(treeNode, true, true, true);
                 //                }
             }
             return true;
         }

         $(document).ready(function () {
             $.fn.zTree.init($("#tree"), setting());

             $("input:radio").change(function () {
                 $.fn.zTree.init($("#tree"), setting());
             });

             //刷新
             $("#btnrefresh").click(function () {
                 var zTree = $.fn.zTree.getZTreeObj("tree");
                 var selectednotes = zTree.getSelectedNodes();
                 //获取的是集合
                 //必须通过循环进行加载获取选中的子节点
                 for (var i = , l = selectednotes.length; i < l; i++) {
                     //                    alert(selectednotes[i].name);
                     zTree.reAsyncChildNodes(selectednotes[i], "refresh", null);
                 }

             });

         });

前台页面：

做一个可以切换的树

<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对象

  protected void Page_Load(object sender, EventArgs e)
     {
         if (!LTMS.BLL.PRM.UserInfo.CheckUserLogin(Page, out _LoginUser)) { return; }

         if (Request.Params["id"] != null)
         {
             ID = Request.Params["id"].ToString();
         }
         else
         {
             ID = "";
         }

         if (Request.Params["level"] != null)
         {
             Level = Request.Params["level"].ToString();
         }
         else
         {
             Level = "-1";
         }

         if (Request.Params["Method"] != null)
         {
             Method = Request.Params["Method"].ToString();
         }

         if (Request.Params["casetype"] != null)
         {
             CaseType = Request.Params["casetype"].ToString();
         }

         //映射
         Type type = this.GetType();
         MethodInfo method = type.GetMethod(Method);
         if (method != null)
         {
             method.Invoke(this, null);
         }
     }

   /// <summary>
     /// 获取用例库
     /// </summary>
     /// <returns></returns>
     public void GetTreeData()
     {
         IList<SWT_UseCase_Module_Model> _infos;
         StringBuilder jsonstr = new StringBuilder();

         if (Level == "-1")
         {
             //用例库顶级大节点，需要经权限筛选
             _infos = UseCaseModule.GetListArray("UseCase", , _LoginUser, CaseType, "");
             //_infos = UseCaseModule.GetListArray("UseCase", _LoginUser);
         }
         else
         {
             //非用例库顶级大节点，无需权限筛选
             //_infos = UseCaseModule.GetTreeData(Convert.ToInt64(ID));
             _infos = UseCaseModule.GetListArray(new string[] { "MODULE_FATHERID=" + ID });
         }

         ///创建资讯树
         string url = "ModuleContent.aspx?id=";

         foreach (SWT_UseCase_Module_Model _mode in _infos)
         {
             //换行需要json转义
             jsonstr.AppendFormat("{{\"id\":{0},\"name\":\"{1}\",\"pId\":{2},\"url\":\"{3}\",\"target\":\"{4}\"", _mode.Module_ID, _mode.Module_Name.Replace("\n", " ").Replace("\r", " "), _mode.Module_FatherID, url + _mode.Module_ID + "&Type="+CaseType, "mid_frame");
             if (UseCaseModule.ExistsBywhere("MODULE_FATHERID=" + _mode.Module_ID))
             {
                 jsonstr.Append(",isParent:true");
             }
             jsonstr.Append("},");
         }

         //移除最后一个,
         if (jsonstr.ToString().EndsWith(","))
         {
             jsonstr = jsonstr.Remove(jsonstr.Length-, );
         }

         _infos = null;
         Response.Write("["+jsonstr.ToString()+"]");

     }

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

主要是脚本页面

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

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = , 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 = , 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 > ) v = v.substring(, v.length - );
            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 == )
                { event.keyCode = ; }
            });

            //初始化
            $.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 == ) {
                    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());
            });

        });

Html页面

<fieldset style="width: 700px">
        <div>
            <input id="MIDH" type="radio" name="group" value="" />类别1
            <input id="SYS" type="radio" name="group" value="" 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" />

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

作者：雨的点滴

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

　　欢迎转载，但须保留版权