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 = 0, 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 = 0, 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 = "0";
        }


        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", 1, _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("
", " ").Replace("
", " "), _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-1, 1);
        }
       
        _infos = null;
        Response.Write("["+jsonstr.ToString()+"]");

    }

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());
            });

        });

 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" />

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

   作者：雨的点滴

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

　　欢迎转载，但须保留版权