LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。

爱吃奶酪的松鼠丶

已于 2023-03-08 19:47:50 修改

阅读量1.1w

点赞数 1

分类专栏： LayUI asp.net C# 文章标签： c#

于 2019-12-14 14:30:54 首次发布

本文链接：https://blog.csdn.net/csdn2990/article/details/103538081

版权

C# 同时被 3 个专栏收录

54 篇文章 5 订阅

订阅专栏

asp.net

4 篇文章 0 订阅

订阅专栏

LayUI

1 篇文章 0 订阅

订阅专栏

先给大家看下效果吧！我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。

历时2天，决绝所有遇到的坑~
做出这样的效果，首先我们要借用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文件，自动帮你分级！！！！！！

爱吃奶酪的松鼠丶

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
5
评论
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。

先给大家看下效果吧！我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。做出这样的效果，首先我们要借用LayUI的内置插件，treetable.js 网上有很多，之前看一个文档里说LayUI不自带这个插件，其实是有的。。。可能他没下载对。—网上百度的用的基本都是这2个文件。但其实LAYUI下载下来的插件里面其实是有的。可能之前没有，最近更新就有了吧...
复制链接

扫一扫