MVC下动态加载Ztree

view

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ztree-</title>

    <link href="~/Content/zTreeIndex.css" rel="stylesheet" />
    @*zTree关于当前页面CSS*@
    <link href="~/Content/zTreeStyle.css" rel="stylesheet" />
    @*zTreeCSS文件*@

    <script src="~/Scripts/zTree/jquery.ztree.core-3.5.js"></script>
    @*zTreeJS文件*@
    <script src="~/Scripts/zTree/jquery.ztree.excheck-3.5.js"></script>
    @*复选框JS文件*@
    <script>
        //gdp.srcUrl = "<%= current_src_url %>"
    </script>

</head>

<body>
        <div class="aside col-md-4 col-sm-4 col-xl-4">
                <ul id="tree-menu" class="ztree"></ul>
        </div>
</body>

    <script>

        var setting = {//Ztree的设置,参考 http://www.ztree.me/v3/main.php#_zTreeInfo

            async: {//加载数据
                enable: true,//开启异步加载
                contentType: "application/json",//Ajax提交数据类型
                url: "/Menu/ReturnData",//数据提交目标
                autoParam: ["id"],//提交数据的参数
            },

            check: {//设置复选框功能
                //enable: true,//设置显示勾选框
                chkStyle: "checkbox",//设置勾选框类型
                chkboxType: { "Y": "ps", "N": "s" }//设置父子关联
            },


            data: {//数据设置
                simpleData: {
                    enable: true,//设置使用简单数据模式
                }
            }
        };
        //动态加载所有节点绑定到容器中
        $(document).ready(function () {
            LoadZtree();
        });

        //加载Ztree
        function LoadZtree() {
            $.ajax({
                type: "post",
                dataType: "json",
                url: "/Menu/Tree",
                data: "id=" + 0,
                complete: function () { $("#load").hide(); },
                success: function (msg) {//数据绑定
                    if (!!msg && msg.Result == 1) {
                        var zNodes = new Array();
                        for (var i = 0; i < msg.RetValue.length; i++) {
                            zNodes = zNodes.concat({ id: msg.RetValue[i].id, pId: msg.RetValue[i].pId, name: "" + msg.RetValue[i].name + "", icon: ""+msg.RetValue[i].icon+"" });
                        }
                        $.fn.zTree.init($("#tree-menu"), setting, zNodes);
                    }
                }
            });
        }

cs

//功能代码

#region.....获取所有节点..... public string Tree(int ID) { //获取菜单表的状态不等于2的所有菜单列表,组装成json数据输出给前端zTree List<Menu> menuList = iMenuService.TDbSet().Where(m => m.State != (int)MenuState.Deleted).ToList(); AjaxResult ajaxResult = new AjaxResult() { Result = DoResult.Success, RetValue = BuildNodeOne(menuList, ID)//返回json数据 }; return JsonHelper.ObjectToString<AjaxResult>(ajaxResult); } private List<TreeNode> BuildNodeOne(List<Menu> menuList, int parentId) { List<TreeNode> treeNodeList = new List<TreeNode>(); //bool State = false;//是否为父菜单 string StateIcon = ""; string SteIcon = System.Configuration.ConfigurationManager.AppSettings["StartImage"]; //配置启用图片地址 string DisableImage = System.Configuration.ConfigurationManager.AppSettings["DisableImage"];//配置禁用图片地址 string DisableState = System.Configuration.ConfigurationManager.AppSettings["DisableState"];//配置禁用图片地址 foreach (var menu in menuList) { //if (menu.MenuLevel == 1 || menu.MenuLevel == 2)//使用异步时打开(只有三级) //{ // State = true; //} if (menu.State == Convert.ToInt32(DisableState))//判断是否禁用-1为禁用 { StateIcon = DisableImage; } else { StateIcon = SteIcon; } treeNodeList.Add(new TreeNode() { id = menu.Id, pId = menu.ParentId,//父ID name = menu.Name,//菜单名 icon = StateIcon,//图片地址 //isParent=State,//使用异步时打开 }); } return treeNodeList; } #endregion #region.....MenuModel..... /// <summary> /// 每个树节点需要的数据 /// </summary> private class TreeNode { public int id { get; set; } public int pId { get; set; }//父ID public int sort { get; set; }//排序 public string Pname { get; set; }//父菜单名称 public string name { get; set; } public string icon { get; set; }//图片地址 public string url { get; set; } public bool isParent { get; set; } public int state { get; set; }//使用状态 public string description { get; set; }//描述 } #endregion

config

<configuration>
  <appSettings>

    <!--Menu-Ztree图片路径-->
    <add key="StartImage" value=""/><!--启用-->
    <add key="DisableImage" value="../../Content/Image/ZtreeImage/diy/state.png"/><!--禁用-->
    
    <!--Menu-判断禁用加载图片条件-->
    <add key="DisableState" value="1"/><!--判断禁用条件-->
    
  </appSettings>
</configuration>
原文地址:https://www.cnblogs.com/JarvisNote/p/5052859.html