利用layui完成树状图

开发工具与关键技术：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);//上级idjson.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;//返回字典集合}

利用layui完成树状图相关推荐

R语言ggplot2可视化树状图、层次聚类系统树图、树状图根据给定的距离度量将相似点分组在一起、并根据点的相似性将它们组织成树状图链接起来（Hierarchical Dendrogram）
R语言ggplot2可视化树状图.层次聚类系统树图.树状图根据给定的距离度量将相似点分组在一起.并根据点的相似性将它们组织成树状图链接起来(Hierarchical Dendrogram) 目录
Python使用matplotlib可视化树状图、层次聚类系统树图、树状图根据给定的距离度量将相似点分组在一起、并根据点的相似性将它们组织成树状图链接起来（Dendrogram）
Python使用matplotlib可视化树状图.层次聚类系统树图.树状图根据给定的距离度量将相似点分组在一起.并根据点的相似性将它们组织成树状图链接起来(Dendrogram) 目录
利用Echarts绘制饼状图等可视化图形
可通过配置参数来实现想要的可视化图形!! <!DOCTYPE html> <html> <head><meta charset="utf-8&quo ...
JSON 数据转成树状图展示工具
Editor | JSON Visio
html树状图右侧_treeview-树形菜单js组件编写及应用
简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了 ...
word列表数据计算机,怎么把树状图的数据填成excel表格-谁会计算机啊，怎么把word里的表格数据转换成簇状......
excel中生成后的数据透视表如何把树形结构每层的空... 打开Word文档窗口,切换到"插入"功能区.在"插图"分组中单击"图表"按钮. ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
利用Excel制作问卷的饼状图
在调研过程中,调研方法有多种:问卷法,访谈法等,而当我们采用问卷法的时候,需要进行统计数据,当然如果选择例如问卷星等网上问卷的话,可以省去自己制作数据饼状图或条形图等麻烦,但因为一些原因,必须使用纸质 ...
axure画扇形_如何利用axure制作一个动态的饼状图
话不多少,先放图! 饼状图首先,我们来分析一下动态效果 1.鼠标悬浮饼状块颜色发生了改变,且尺寸发生了变化 2.鼠标移入不同的块内,提示框随着鼠标的移动而移动,且提示框内的文字发生了变化. 然 ...

利用layui完成树状图

利用layui完成树状图相关推荐

最新文章

热门文章