2、html代碼
權(quán)限樹：
3、JS代碼
var setting = {
async: {
enable: true,
url: '/RoleToPerssion/GetPerssionTree',//異步加載時(shí)的請(qǐng)求地址
autoParam: ["roleid"],//提交參數(shù)
type: 'get',
dataType: 'json'
},
check: {
enable: true, ? //true / false 分別表示 顯示 / 不顯示 復(fù)選框或單選框
autoCheckTrigger: true, ? //true / false 分別表示 觸發(fā) / 不觸發(fā) 事件回調(diào)函數(shù)
chkStyle: "checkbox", ? //勾選框類型(checkbox 或 radio）
//chkboxType: { "Y": "p", "N": "s" } ? //勾選 checkbox 對(duì)于父子節(jié)點(diǎn)的關(guān)聯(lián)關(guān)系
},
checkable: true,
showIcon: true,
showLine: true,
data: {
simpleData: {
enable: true
}
},
expandSpeed: "",
callback: {
onClick: zTreeOnClick
}
};
$(document).ready(function () {
$.ajax({
url: '/RoleToPerssion/GetPerssionTree?roleid=""',//異步加載時(shí)的請(qǐng)求地址
type: 'get',
dataType: 'json',
success: function (data) {
$.fn.zTree.init($("#treeDemo"), setting, data);
}
});
});
//單擊時(shí)獲取zTree節(jié)點(diǎn)的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 + ",";
}
}
}
4、Mvc后臺(tái)主要代碼
public class PerssonTreeModel
{
public string Id { get; set; }
///
/// 權(quán)限名稱
///
public string name { get; set; }
public string PId { get; set; }
///
/// 子節(jié)點(diǎn)
///
public List children { get; set; }
///
/// 是否有復(fù)選框
///
public bool nocheck { get; set; }
///
/// 是否展開節(jié)點(diǎn)
///
public bool open { get; set; }
}
///
/// 獲取目錄樹的json
///
///
///
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();
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);
}
///
/// 獲取一級(jí)權(quán)限下面的子節(jié)點(diǎn)
///
///
///
///
public List GetChildrenList(string id, List list)
{
var result = new List();
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、最終效果圖：
我的博客原文地址：http://www.cnblogs.com/hgmyz/p/7441376.html
