今天自己采用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="width: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=="").ToList();
var childrenlist = perssionbll.GetAllList().Where(m => m.ParentId != "").ToList();
var result = new List<PerssonTreeModel>();
if (parentlist!=null && parentlist.Count>)
{
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 > )
{
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、最终效果图：