z-tree學習筆記

做項目時，需要用到帶複選框的tree。經比較後優選了ztree，功能強大，文檔清晰。

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

直接上代碼吧。

1、下載下傳ztree後。将裡面需要用到的css,js檔案，複制到項目中，引用到需要的頁面

<link rel="stylesheet" href="/Content/ztree/demo.css" target="_blank" rel="external nofollow"  type="text/css">
    <link rel="stylesheet" href="/Content/ztree/zTreeStyle/zTreeStyle.css" target="_blank" rel="external nofollow"  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; }
    }
           

　　

轉載于:https://www.cnblogs.com/taoshengyujiu/p/10061807.html