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>