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树形表格的实现， 数据格式正确，不显示的解决方案 和在这个过程中遇到的坑~ 认真看 你会得到一些想要的答案。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mxf修复案例
- 下一篇： gfdsifgasdf