先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。
做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之前看一个文档里说LayUI不自带这个插件,其实是有的。。。可能他没下载对。
—网上百度的用的基本都是这2个文件。
但其实LAYUI下载下来的插件里面其实是有的。可能之前没有,最近更新就有了吧~我用的是他自身的,但其实都一样,我大概看了2个JS文件,写的类容都一样,也都可以实现树形表格的功能。(PS:说这个就是想说网上那么多人都非得单独下载treetable-lay这个插件。。其实没必要,因为官方已经有了,我用得就是官方。虽然2个都一样)
下面是我用的官网写的treetable.js文件
好了 废话不多说了 插件搞来了 直接上代码!下面是主题
首先是需要引用得东西。给大家看下我得。必须引用得是layui.css和layui.JS不然没效果
<head>
<meta name="viewport" content="width=device-width" />
<title>系统资源模块</title>
<link href="~/layuiadmin/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/layuiadmin/layui/layui.js"></script>
</head>
然后是页面代码!就是一个table
<table class="layui-hide" id="menu" lay-filter="menu"></table>
然后JS代码 我相信初用得同学们并不清楚JS里面的代码各个的含义,以及对应的关系,这里我将详细介绍
先看代码
<script type="text/javascript">
layui.config({
base: '../layuiadmin/modules/' //treetable文件路径
}).extend({
treetable: 'treetable', //插件名称
});
layui.use(['treetable', 'table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
//渲染表格
var renderTable = function () {
layer.load(2); //加载数据动画
treetable.render({
id: 'menu', //做刷新的时候需要用ID
treeColIndex: 0, //树形图标显示在第几列
treeSpid: 'e10ce31c-124c-4398-b118-1d5bf6dd39f3', //最上级的父级id,可以自定义
treeIdName: 'id', //id字段的名称
treePidName: 'pid', //pid字段的名称,父级菜单id
treeDefaultClose: true, //是否默认折叠
treeLinkage: false, //父级展开时是否自动展开所有子级
elem: '#menu', //表格id
url: '/SystemResourceModule/SysInfo',
page: false,
cols: [[
{ field: 'Name', title: '资源模块名' },
{ field: 'Code', title: '代码' },
{ field: 'Url', title: '链接' },
{
field: 'Type', title: '类型', templet: function (res) {
if (res.Type == 0) {
return '菜单'
} else {
return '按钮'
}
}
}
]],
//数据渲染完的回调
done: function () {
//关闭加载
layer.closeAll('loading');
}
})
};
renderTable();
});
</script>
上面JS代码部分 ,重点讲解
treeSpi
treeIdName
treePidName
首先是最大的坑treeSpi 你这个值写错,你数据就会出不来!这个属性的意思,就是父级ID,就是一级菜单的ID ,你数据库里面传过来的一级PID是多少,你就得写多少,比如你得一级PID是0 那么你就得写0,当然,我数据库PID用的类型是uniqueidentifier,所有传过来的ID是那些十六进制的玩意。但只要你对应,他就会显示出来,这个坑坑了我2天(一直数据传过来了 ,但就是不显示!!!那么就是你这个ID写错了!!!)
**切忌。PID值不能为null ,插件不识别。**往后看我后台代码。
接着就是 treeIdName这个就是你数据库里面的id字段.
treePidName* 这个就是数据库的pid字段。
上面首坑就是treeSpi ,应该说的 很明白了吧,有还搞不出来的可以留言。
好了上面就是我JS所遇到的坑~
接着是我的后台代码
public ActionResult SysInfo()
{
var list = (from s in db.SystemResourceModule
select new
{
id = s.Id,
Name = s.Name,
Code = s.Code,
Url = s.Url,
Type = s.Type,
//如果等于空值 就给父级一个ID ,否则就让PID=PID
pid = s.ParentId == null ? new Guid("{e10ce31c-124c-4398-b118-1d5bf6dd39f3}") : s.ParentId,
}).ToList();
return Json(new { code = 0, mgs = "success", count = list.Count(), data = list.OrderBy(s =>s.id) }, JsonRequestBehavior.AllowGet);
}
后台要注意的就是,如果你数据出不来,显示无数据,那就是你格式错了。我最开始理解错了,我以为后台需要自己先把父级,和子级菜单先自己分出来,然后再传值。。。结果我理解错了,我分出后然后传过去,格式的确和官网要求的树形格式一样!!!但是,,,你用的treetable.js别人不接收你分好的树形格式呀,,,,,他只接收你查出来一张表的所有数据,(无奈的我后台写了一天的树格式。。。结果人家还不接收。。。。) 然后那个JS文件,自动帮你分级!!!!!!