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("\n", " ").Replace("\r", " "), _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="width: 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

　　欢迎转载，但须保留版权