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

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

做出这样的效果，首先我们要借用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',       //做刷新的时候需要用IDtreeColIndex: 0,  //树形图标显示在第几列treeSpid: 'e10ce31c-124c-4398-b118-1d5bf6dd39f3',     //最上级的父级id，可以自定义treeIdName: 'id',  //id字段的名称treePidName: 'pid',  //pid字段的名称，父级菜单idtreeDefaultClose: true, //是否默认折叠treeLinkage: false,     //父级展开时是否自动展开所有子级elem: '#menu',   //表格idurl: '/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.SystemResourceModuleselect new{id = s.Id,Name = s.Name,Code = s.Code,Url = s.Url,Type = s.Type,//如果等于空值  就给父级一个ID  ，否则就让PID=PIDpid = 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文件，自动帮你分级！！！！！！

好了到这大概能解决掉你数据出不来的大部分问题~ 希望对不会的同学有帮助哦!不懂得可以留言，或者加我QQ

另外需要兼职外快写程序得请加群943149166，群2：598766788

树形表格有不懂得问群主~

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

实现layui的树形表格treeTable
实现layui的树形表格treeTable,layui中有可以使用 'tree','table' , 进而使用layui.treeGird实现 layui.treeGird({elem: '#dem ...
layui的table表格在同一单元格换行显示2个数据（layui-table）
转自:https://blog.csdn.net/qq15577969/article/details/104109430 先看一下最终效果图: 查看全文 http://www.taodudu.cc/ ...
tree-table 树形表格
首先先下载 cnpm i vue-table-with-tree-grid --S 还需在main.js中导入 import TreeTable from 'vue-table-with-tree-g ...
第二节：如何正确使用WebApi和使用过程中的一些坑
一. 基本调用规则 1. 前提 WebApi的默认路由规则为:routeTemplate: "api/{controller}/{id}", 下面为我们统一将它改为 routeTe ...
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
layui 树形表格
最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件-treeTable. 插件地址演示地址: https://whvse.gitee.io/tr ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
Layui实现TreeTable(树形数据表格)
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee:ele-admin / treetable-lay 文中涉及的treetable.js ...
Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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