概述

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

1. 使用說明

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

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

2. 使用需知

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

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

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

2.2 本組件基于layUIAdmin進(jìn)行使用

本組件使用中的Ajax請(qǐng)求，基于layUIAdmin的admin.req()進(jìn)行。 如果不使用layUIAdmin，需要自行調(diào)整源碼。

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

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

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

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

本組件及treetable.js所不支持的方法，均可使用layUI原生的數(shù)據(jù)表格組件的相應(yīng)方法。 本組件不支持列表的toolbar操作，則可以使用table原生的事件監(jiān)聽：

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

2.4 組件源碼

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

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完全相同，請(qǐng)熟讀treetable.js的幫助文檔。

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

實(shí)現(xiàn)layui的樹形表格treeTable

1.簡(jiǎn)介

在layui數(shù)據(jù)表格之上進(jìn)行擴(kuò)展實(shí)現(xiàn)。

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

還有一個(gè)BOM表結(jié)構(gòu)的樹形表格，樹形表格2，歡迎查看。

2.使用方法

2.1.引入模塊

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

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新增參數(shù)treeSpid: -1, // treetable新增參數(shù)treeIdName: 'd_id', // treetable新增參數(shù)treePidName: 'd_pid', // treetable新增參數(shù)treeDefaultClose: true, // treetable新增參數(shù)treeLinkage: true, // treetable新增參數(shù)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傳遞數(shù)據(jù)，也可以使用data傳遞數(shù)據(jù)，如果使用url傳遞數(shù)據(jù)，參數(shù)是where字段， 跟layui數(shù)據(jù)表格的使用方式一致。

數(shù)據(jù)格式

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

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

2.3.參數(shù)說明

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

參數(shù)類型是否必填描述treeColIndexint是樹形圖標(biāo)顯示在第幾列treeSpidobject是最上級(jí)的父級(jí)idtreeIdNamestring否id字段的名稱treePidNamestring否pid字段的名稱treeDefaultCloseboolean否是否默認(rèn)折疊treeLinkageboolean否父級(jí)展開時(shí)是否自動(dòng)展開所有子級(jí)

treeColIndex

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

treeSpid

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

treeIdName

treetable是以id和pid字段來渲染樹形結(jié)構(gòu)的，如果你的數(shù)據(jù)沒有id和pid字段，你可以指定id和pid字段的名稱。

treePidName

pid在你的數(shù)據(jù)字段中的名稱。

treeDefaultClose

默認(rèn)是全部展開的，如果需要默認(rèn)全部關(guān)閉，加上treeDefaultClose:true即可。

treeLinkage

父級(jí)展開時(shí)是否自動(dòng)展開所有子級(jí)

2.4.注意事項(xiàng)

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

2.5.其他方法

全部展開

treetable.expandAll('#table1');

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

2.6.如何修改圖標(biāo)

通過css來修改圖標(biāo)，content是圖標(biāo)的unicode字符。

修改文件夾圖標(biāo)：

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

修改文件圖標(biāo)：

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

修改箭頭的圖標(biāo)：

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

如何獲取content：

2.7.截圖

樹形表格1：

樹形表格2：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。