概述

后臺框架中使用樹狀表格是非常常用的操作，layUI本身并沒有這種組件。 第三方的treetable.js做到了完美的實現，但是不能實現在雙擊時異步加載數據，本文就是站在了巨人的肩膀上實現的異步加載的樹狀表格~

1. 使用說明

本組件基于treetable.js組件進行編寫，最大的區別在treetable.js無法進行異步加載，而本組件則使用異步加載樹狀表格。 因此，若無異步加載需求，建議直接使用treetable.js，有異步加載需求時，可使用本組件。

由于treetable.js的源碼進行過修改，因此不能使用官方下載的原版本（如需使用，可私聊作者獲取）

2. 使用需知

2.1 本組件依賴于treetable.js【重中之重】

由于本組件依賴于treetable.js,因此使用本組件時，需首先引入treetable.js，方可使用。 但由于treetable.js的源碼進行過修改，因此不能使用官方下載的原版本（如需使用，可私聊作者獲取）。 代碼示例：

layui.config({base: '../../common/' }).extend({index: 'lib/index',treetable: "../lib/extend/treetable", // 使用異步加載treetableAsync，必須先引入treetabletreetableAsync : '../lib/extend/treetableAsync' })

2.2 本組件基于layUIAdmin進行使用

本組件使用中的Ajax請求，基于layUIAdmin的admin.req()進行。 如果不使用layUIAdmin，需要自行調整源碼。

2.3 本組件的方法支持treetable.js的所有方法；

本組件中所用的所有方法，均基于支持treetable.js中所使用的方法，因此在treetable.js中可以調用的方法，均可使用treetableAsync調用。 例如：

treetableAsync.expandAll('#dataList'); // 等同于 treetable.expandAll('#dataList');

2.4 本組件不支持的其他方法，均可使用layui-table組件的方法。

本組件及treetable.js所不支持的方法，均可使用layUI原生的數據表格組件的相應方法。 本組件不支持列表的toolbar操作，則可以使用table原生的事件監聽：

//列表操作 table.on('tool(dataList)', function (obj) { })

2.4 組件源碼

本組件源碼附上，大家有疑問可以評論留言。

layui.define(['index','form','treetable','jquery','treetable'],function(exports){var treetable = layui.treetable,table = layui.table,form = layui.form,$ = layui.jquery,setter = layui.setter,view = layui.view,admin = layui.admin;var tableData = [];var treetableAsync = {render : function(param){var provincesUrl = param.url;function init(id){admin.req({url: provincesUrl + id,type:"get",success:function(r){param.data = tableData = r.data;tableInit();}});}init(param.treeSpid);// 渲染表格function tableInit(){treetable.render(param);}$("body").on('dblclick','.layui-table-body .layui-table tr',function(){var top = $('.layui-table-body').scrollTop();var pid = $(this).find('div[class$="'+param.treeIdName+'"]').text();var index = $(this).index();admin.req({url: provincesUrl + pid,type:"get",success:function(r){var isInit = false;for(var i=0; i<r.data.length; i++){var isPush = true;for(var j=0; j<tableData.length; j++){if(r.data[i][param.treeIdName] == tableData[j][param.treeIdName]){isPush = false;}}if(isPush){tableData.push(r.data[i]);isInit = true;}}if(isInit){param.data = tableData;tableInit();expandSelfAndParent(index);$('.layui-table-body').scrollTop(top);}}});});function expandSelfAndParent(index){treetable.toggleRows($('.layui-table-body .layui-table tr').eq(index).find('.treeTable-icon'));var tpid = $('.layui-table-body .layui-table tr').eq(index).find('.treeTable-icon').attr('lay-tpid');var trs = $('.layui-table-body .layui-table tr');var j = -1;for(var i=0; i<trs.length; i++){if($(trs[i]).find('.treeTable-icon').attr('lay-tid') == tpid){treetable.toggleRows($('.layui-table-body .layui-table tr').eq(i).find('.treeTable-icon'));if($(trs[i]).find('.treeTable-icon').attr('lay-tpid') != 0){j=i}break;}}if(j != -1){init(j)}}},toggleRows:function($dom, linkage){treetable.toggleRows($dom, linkage);},getEmptyNum:function(pid, data){treetable.getEmptyNum(pid, data);},checkParam:function(param){treetable.checkParam(param);},expandAll:function(dom){treetable.expandAll(dom);},foldAll:function(dom){treetable.foldAll(dom);}}exports('treetableAsync', treetableAsync);})

初次之外，本組件所有方法屬性，均與treetable.js完全相同，請熟讀treetable.js的幫助文檔。

【附】 非異步加載的treetable.js使用方式

實現layui的樹形表格treeTable

1.簡介

在layui數據表格之上進行擴展實現。

• 演示地址：https://whvse.gitee.io/treetable-lay/

還有一個BOM表結構的樹形表格，樹形表格2，歡迎查看。

2.使用方法

2.1.引入模塊

下載module/treetable-lay整個文件夾，放在你的項目里面，然后使用模塊加載的方式使用：

layui.config({base: 'module/' }).extend({treetable: 'treetable-lay/treetable' }).use(['treetable'], function () {var treetable = layui.treetable;});

2.2.渲染表格

<table id="table1" class="layui-table" lay-filter="table1"></table><script> layui.use(['treetable'], function () {var treetable = layui.treetable;// 渲染表格treetable.render({treeColIndex: 2, // treetable新增參數treeSpid: -1, // treetable新增參數treeIdName: 'd_id', // treetable新增參數treePidName: 'd_pid', // treetable新增參數treeDefaultClose: true, // treetable新增參數treeLinkage: true, // treetable新增參數elem: '#table1',url: 'json/data1.json',cols: [[{type: 'numbers'},{field: 'id', title: 'id'},{field: 'name', title: 'name'},{field: 'sex', title: 'sex'},{field: 'pid', title: 'pid'},]]}); }); </script>注意： 可以使用url傳遞數據，也可以使用data傳遞數據，如果使用url傳遞數據，參數是where字段， 跟layui數據表格的使用方式一致。

數據格式

總而言之就是以id、pid的形式，不是以subMenus的形式，當然id、pid這兩個字段的名稱可以自定義：

{"code": 0,"msg": "ok","data": [{"id": 1,"name": "xx","sex": "male","pid": -1},{"id": 2,"name": "xx","sex": "male","pid": 1}] }

2.3.參數說明

layui數據表格的所有參數都可以用，除此之外treetable新增的參數有：

參數類型是否必填描述treeColIndexint是樹形圖標顯示在第幾列treeSpidobject是最上級的父級idtreeIdNamestring否id字段的名稱treePidNamestring否pid字段的名稱treeDefaultCloseboolean否是否默認折疊treeLinkageboolean否父級展開時是否自動展開所有子級

treeColIndex

樹形圖標（箭頭和文件夾、文件的圖標）顯示在第幾列， 索引值是cols數組的下標。

treeSpid

最上級的父級id，比如你可以規定pid為0或-1的是最頂級的目錄。

treeIdName

treetable是以id和pid字段來渲染樹形結構的，如果你的數據沒有id和pid字段，你可以指定id和pid字段的名稱。

treePidName

pid在你的數據字段中的名稱。

treeDefaultClose

默認是全部展開的，如果需要默認全部關閉，加上treeDefaultClose:true即可。

treeLinkage

父級展開時是否自動展開所有子級

2.4.注意事項

• 不能使用分頁功能，即使寫了page:true，也會忽略該參數。
• 不能使用排序功能，不要開啟排序功能。
• table.reload()不能實現刷新，請參考demo的刷新。
• 除了文檔上寫的http://treetable.xxx的方法之外，其他數據表格的方法都使用http://table.xxx。
• 建議刪除和修改請求完后臺之后請刷新（重新渲染）表格，最好不要使用obj.delete方式刪除。

2.5.其他方法

全部展開

treetable.expandAll('#table1');

全部折疊 javascript treetable.foldAll('#table1');

2.6.如何修改圖標

通過css來修改圖標，content是圖標的unicode字符。

修改文件夾圖標：

/** 未展開 */ .treeTable-icon .layui-icon-layer:before {content: "e638"; }/** 展開 */ .treeTable-icon.open .layui-icon-layer:before {content: "e638"; }

修改文件圖標：

.treeTable-icon .layui-icon-file:before {content: "e621"; }

修改箭頭的圖標：

/** 未展開 */ .treeTable-icon .layui-icon-triangle-d:before {content: "e623"; }/** 展開 */ .treeTable-icon.open .layui-icon-triangle-d:before {content: "e625"; }

如何獲取content：

2.7.截圖

樹形表格1：

樹形表格2：

總結

以上是生活随笔為你收集整理的bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。