今天自己采用MVC+ZTree的技术实现权限树的功能，有需要的可以收藏一下。
1、需要引用的JS 文件
<link href="~/Content/ZTree/css/demo.css" rel="stylesheet" />
<link href="~/Content/ZTree/css/metroStyle/metroStyle.css" rel="stylesheet" />
<script src="~/Content/ZTree/js/jquery.ztree.core.js"></script>
<script src="~/Content/ZTree/js/jquery.ztree.excheck.min.js"></script>
2、html代码
<div class="form-group">
<div class="label">
<label>权限树：</label>
</div>
<div class="field">
<ul style="400px;height:200px;" id="treeDemo" class="ztree"></ul>
</div>
</div>
3、JS代码
<script type="text/javascript">
var setting = {
async: {
enable: true,
url: '/RoleToPerssion/GetPerssionTree',//异步加载时的请求地址
autoParam: ["roleid"],//提交参数
type: 'get',
dataType: 'json'
},
check: {
enable: true, //true / false 分别表示 显示 / 不显示 复选框或单选框
autoCheckTrigger: true, //true / false 分别表示 触发 / 不触发 事件回调函数
chkStyle: "checkbox", //勾选框类型(checkbox 或 radio）
//chkboxType: { "Y": "p", "N": "s" } //勾选 checkbox 对于父子节点的关联关系
},
checkable: true,
showIcon: true,
showLine: true,
data: {
simpleData: {
enable: true
}
},
expandSpeed: "",
callback: {
onClick: zTreeOnClick
}
};
$(document).ready(function () {
$.ajax({
url: '/RoleToPerssion/GetPerssionTree?roleid=""',//异步加载时的请求地址
type: 'get',
dataType: 'json',
success: function (data) {
$.fn.zTree.init($("#treeDemo"), setting, data);
}
});
});
//单击时获取zTree节点的Id,和value的值
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
// var treeValue = treeNode.Id + "," + treeNode.name;
//alert(treeNode.Id + "," + treeNode.name);
};
//获取选中value值
function GetIDs() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = treeObj.getCheckedNodes(true),
v = "";
var ids = "";
for (var i = 0; i < nodes.length; i++) {
v += nodes[i].name + ",";
if (nodes[i].PId != "0") {
ids += nodes[i].Id + ",";
}
}
}
</script>
4、Mvc后台主要代码
public class PerssonTreeModel { public string Id { get; set; } /// <summary> /// 权限名称 /// </summary> public string name { get; set; } public string PId { get; set; } /// <summary> /// 子节点 /// </summary> public List<PerssonTreeModel> children { get; set; } /// <summary> /// 是否有复选框 /// </summary> public bool nocheck { get; set; } /// <summary> /// 是否展开节点 /// </summary> public bool open { get; set; } } /// <summary> /// 获取目录树的json /// </summary> /// <param name="roleid"></param> /// <returns></returns> public JsonResult GetPerssionTree(string roleid) { var parentlist = perssionbll.GetAllList().Where(m=>m.ParentId=="0").ToList(); var childrenlist = perssionbll.GetAllList().Where(m => m.ParentId != "0").ToList(); var result = new List<PerssonTreeModel>(); if (parentlist!=null && parentlist.Count>0) { foreach(var item in parentlist) { result.Add(new PerssonTreeModel { Id = item.id, name = item.Title, PId = item.ParentId, nocheck = true, open = true, children = GetChildrenList(item.id,childrenlist) }); } } return Json(result,JsonRequestBehavior.AllowGet); } /// <summary> /// 获取一级权限下面的子节点 /// </summary> /// <param name="id"></param> /// <param name="list"></param> /// <returns></returns> public List<PerssonTreeModel> GetChildrenList(string id, List<T_Permissions> list) { var result = new List<PerssonTreeModel>(); list = list.Where(m => m.ParentId == id).ToList(); if (list != null && list.Count > 0) { foreach (var item in list) { result.Add(new PerssonTreeModel { Id = item.id, name = item.Title, PId = id, open = false, nocheck = false, children = null }); } } return result; }
5、最终效果图：
