开发工具与关键技术:Visual Studio 2015 layui
作者:孙水兵
撰写时间:2019年7月17
一、 达到的效果
二、 涉及的表格
用户类型表(SYS_UserType)、权限表(PW_Jurisdiction)、详细模块表(SYS_DetailModular)、模块表(SYS_Modular)。其中详细模块表中包含的是模块下面的一些子页面的名称。而权限表是用来连接用户表和详细模块表的。
三、 注意
layui 2.5 版本之前的 tree,它将不被兼容,需更换成2.5之后的版本。
四、 代码
HTML代码
HTML代码在所需要放置树状图的地方放一个div中并写一个id即可。
JS代码(参考:https://blog.csdn.net/qq_41657790/article/details/93777024 )
在页面加载事件中先加载layui中树形组件的模块:tree。因为我这里是需要根据用户类型查询出对应的权限,因此需要获取到对应的用户类型ID,而刚开始加载树形图的时候没有选中用户类型,因此,让用户类型ID等于0。然后用post提交将用户类型ID提交到控制器,然后到控制器获取对应的数据源。然后加载树状图。elem表示的是HTML中对应的id,data:要显示的数据源,showCheckbox:是否显示复选框。accordion:是否开启手风琴模式,默认 false。
$(function () {
layui.use(['layer', 'table', 'tree'], function () {
layer = layui.layer;
layuiTable = layui.table;
layuiTree = layui.tree;
var UserTypeID = 0;
//树形图显示
$.post("/SetSystem/UserTypeManagement/SelectTree", { UserTypeID, UserTypeID}, function (data) {
layuiTree.render({
elem: '#treeModular', //绑定元素
data: data,//返回的数据
showCheckbox: true,
accordion: true,//手风琴模式
});
})
});
控制器代码
先创建一个方法用来接收页面传过来的用户类型ID(UserTypeID)并将获取到的树状图的数据源返回。在该方法中调用方法GetTree()来获取树状图的数据源,并传入0和用户ID。将数据源以json格式返回。
public ActionResult SelectTree(int UserTypeID)
{
//调用获取数据方法从0(上级id)开始
List<Dictionary<string, object>> data = GetTree(0, UserTypeID);
return Json(data, JsonRequestBehavior.AllowGet);
}
方法:GetTree()
在该方法中接收前面传递过来的两个数据。然后在方法中创建一个字典集合jsonList。然后在模块表中查询出所有数据(一级节点的所有数据)。然后foreach循环查询出来的数据并用dr接收。然后在foreach循环中创建一个字典json。然后添加一级节点的标题(title)为查询出来的模块的名称,id为模块的ID。子节点(children)则调用方法getChildren()来获取,并将模块ID,和用户类型传入方法。然后将字典json放入字典集合jsonList中,然后在foreach循环外返回字典集合。
public List<Dictionary<string, object>> GetTree(int id,int UserTypeID)
{
//创建一个字典集合
List<Dictionary<string, object>> jsonoList = new List<Dictionary<string, object>>();
//查询出表的所有数据
var treeList = myModels.SYS_Modular.Select(m => m).ToList();
foreach (SYS_Modular dr in treeList)//foreach循环遍历
{
//创建字典,将所需的字段和值添加进去
Dictionary<string, object> json = new Dictionary<string, object>();
json.Add("title", dr.ModularName);//标题
json.Add("id", dr.ModularID);//上级id
json.Add("children", getChildren(dr.ModularID,UserTypeID));
jsonoList.Add(json);//将字典添加进字典集合
}
return jsonoList;//返回字典集合
}
方法:getChildren()
和方法GetTree()类似,接收前面传入的两个ID。然后创建一个字典集合。然后在详细模块表中查询出与模块表中对应的详细模块用treeList接收。然后再到权限表中查询出该用户类型对应的权限数据用checkDetailModularID来接收。foreach循环treeList。在循环中创建一个字典。然后与方法GetTree()一样,将需要的字段和值添加进去。然后再判断该用户类型是否有对应的权限。有的话,foreach循环checkDetailModularID,然后判断他们的详细模块ID是否相等,相等的话说明该用户有该权限,然后勾选。然后将字典json放入字典集合jsonList中,然后在foreach循环外返回字典集合。
public List<Dictionary<string, object>> getChildren(int id,int UserTypeID)
{
//创建一个字典集合
List<Dictionary<string, object>> jsonoList = new List<Dictionary<string, object>>();
//查询出表的所有数据
var treeList = myModels.SYS_DetailModular.Where(m => m.ModularID == id).Select(m => m).ToList();
//查询选中的权限
var checkDetailModularID = myModels.PW__Jurisdiction.Where(m => m.UserTypeID == UserTypeID).Select(m => m).ToList();
foreach (SYS_DetailModular dr in treeList)//foreach循环遍历
{
//创建字典,将所需的字段和值添加进去
Dictionary<string, object> json = new Dictionary<string, object>();
json.Add("title", dr.DetailModularName);//标题
json.Add("id", dr.DetailModularID);
if (checkDetailModularID.Count() > 0)
{
foreach (PW__Jurisdiction item in checkDetailModularID)
{
if (item.DetailModularID == dr.DetailModularID)
{
json.Add("checked", true);//复选框勾选
json.Add("id_jurisdiction", item.JdtionID);
}
}
}
jsonoList.Add(json);//将字典添加进字典集合
}
return jsonoList;//返回字典集合
}