z-tree学习笔记

做项目时，需要用到带复选框的tree。经比较后优选了ztree，功能强大，文档清晰。

http://www.treejs.cn/v3/api.php

直接上代码吧。

1、下载ztree后。将里面需要用到的css,js文件，复制到项目中，引用到需要的页面

    <link rel="stylesheet" href="/Content/ztree/demo.css" type="text/css">
    <link rel="stylesheet" href="/Content/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/Scripts/ztree/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/Scripts/ztree/jquery.ztree.excheck.js"></script>
    <style>
        table th {
            text-align: center !important;
        }

        ul.ztree {
            height: 200px;

     
        }
        .ztree li {
        //原有项间距太小
            margin: 5px;
        }
        .ztree * {
             //原有字体太小
            font-size: 15px !important;
        }
    </style>

2、form中或者其他地方 添加个ul 的tree

 <div class="col-sm-6">
                    @Html.TextBoxFor(m => m.AreasString, new { id = "userArea", @class = "form-control popupwindowinput hidden" })
                    @Html.ValidationMessageFor(m => m.AreasString)
                    <ul id="areaTree" class="ztree"></ul>
                </div>

　3、js中设置ztree的配置参数

  var editUserId = "";
        var rawGetAreaUrl=  "@Url.Action("GetAreasTree", "CommonAjax",new {userId="_userId_",roleName="_roleName_"})";
//我用的asp.net 中的mvc， 注意传参时的&被转码了
        var decodeGetAreaUrl = rawGetAreaUrl.replace(/amp;/g, "");
        var selectIds = new Array();
        var treeSettings = {
            async: {
                enable: true,
                type: "post",
                contentType: "text/html;charset=UTF-8",
                dataType: 'json',
                url: decodeGetAreaUrl 
            },
            view : {
                showIcon : false,
                selectedMulti : true,     //可以多选
                showLine : false,
                expandSpeed : 'fast',
                dblClickExpand : false
            },
            check : {
                enable : true,
                chkStyle : "checkbox",    //复选框
                //父子不关联，各选各的。
                chkboxType : {
                    "Y":  "",
                    "N" : ""
                }
            },
            data : {
                simpleData : {
                    enable: true,
                    idKey: "id"
                },
//key是ztree字段与后台接口字段的映射。一开始想用kendo ui的tree，所以后台一些字段名称和ztree不太对应
                key: {
                    checked:"IsChecked",
                    children: "Items",
                    name: "Name",
                    isParent:"IsParent" //叶子节点前面没有加号
                }
            },
            callback : {
                onCheck : checkAreaTree
            }
        };

　　4、初始化树

  $.fn.zTree.init($("#areaTree"), treeSettings);

　　5、获取tree选中的值。

  function getSelectedTreeAreaIds() {
                    var selectAreaIds = new Array();
                    var tree = $.fn.zTree.getZTreeObj('areaTree');
                    var treeData = tree.getCheckedNodes(true);
                    if (treeData.length != 0) {
                        for (var i = 0; i < treeData.length; i++) {
                            selectAreaIds.push(treeData[i].Id);
                            if (treeData[i].level == 0) {
                                //前提，地区树的顶级是market大区
                                selectedMarketAreaCount++;
                            }
                        }
                    }
                    return selectAreaIds;
                };

　　6、将tree多选中的值传递给MVC model的string字段，此时，js将数组默认转变成用逗号连接的string，便于form提交，传递给后台。

 var selectedTreeAreas = getSelectedTreeAreaIds();
  $("#userArea").val(selectedTreeAreas);

　　7、后台接口数据

  #region 地区 tree
        public JsonResult GetAreasTree(string userId,string roleName)
        {
            List<Area> allAreas = _commonService.GetAreas().ToList();
            if (_commonService.GetRoleNamesCannotSelectDistrict().Contains(roleName))
            {
                allAreas = allAreas.Where(m => m.Category != (int)AreaCategoryEnum.District).ToList();
            }
            List<int> allCheckedItemIds = _commonService.GetUserAreaIdNew(userId);
            var areaTreeData = GetChildren(allAreas, allCheckedItemIds, 0);
            return Json(areaTreeData, JsonRequestBehavior.AllowGet);
        }


        private List<KendoTreeModel> GetChildren(List<Area> allItems,List<int> allCheckedItemIds, int parentId)
        {
            List<KendoTreeModel> models = new List<KendoTreeModel>();
            var sonItems = allItems.FindAll(c => c.ParentId == parentId).OrderBy(c => c.SortNumber);
            foreach (var son in sonItems)
            {
                var kendoTreeModel = new KendoTreeModel()
                {
                    Id = son.Id,
                    Name = son.Text,
                    Expanded = son.ParentId.GetValueOrDefault() != 1,
                    IsChecked = allCheckedItemIds.Contains(son.Id),
                    Items = GetChildren(allItems, allCheckedItemIds, son.Id),
                };
                kendoTreeModel.IsParent = kendoTreeModel.Items.Any();
                models.Add(kendoTreeModel);
            }
            return models;
        }
        #endregion

　8、节点Model

 public class KendoTreeModel
    {
        public int Id { set; get; }
        public int ParentId { set; get; }

        public string Name { set; get; }
        public bool IsChecked { set; get; }
        public bool IsParent { get; set; }
        public bool Expanded { set; get; }
        public List<KendoTreeModel> Items { set; get; }
    }