使表格增加了樹(shù)形結構展示的能力.完全依賴(lài)于layui的表格. 正因為如此,您可以像使用表格組件一樣使用該組件.layui的表格功能.全都有.全都有.全都有. 該組件最大的特點(diǎn)就是原封不動(dòng)的調用了官方的table組件.也就是說(shuō).隨著(zhù)官方的更新.可以隨時(shí)使用table更好更炫酷的功能而不需要對本組件做任何操作.
![[委屈]](../../t4/appstyle/expression/ext/normal/73/wq_thumb.gif "[委屈]")
.本組件污染了原始表格.為了實(shí)現點(diǎn)擊折疊展開(kāi)功能.我給表格的某個(gè)字段綁定了點(diǎn)擊事件.但是除此之外我不知道該怎么做才能在實(shí)現展開(kāi)折疊操作時(shí)候做到不污染原始表格.可能會(huì )給您帶來(lái)困擾.
![[微笑]](../../t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif "[微笑]")
| 方法名 | 描述 |
|---|---|
| render | 表格渲染.一般第一次顯示調用.或者其他操作比如刪除/添加等操作后也可以調用.第二次調用可以不傳參數.如果傳遞參數會(huì )將上次參數覆蓋. |
| reload | 表格重載,內部調用了table.reload().一般用于搜索后顯示數據.提交where條件給后端. |
| getTable | 由于該組件內部使用了layui.table.如果想更細粒度的操作table.可以使用此方法獲取table對象 |
| 其他方法 | 請閱讀源碼,只要方法名不以下劃線(xiàn)開(kāi)頭都可以使用.如果需要的話(huà). |
| 名稱(chēng) | 描述 | 必填 | 默認值 |
|---|---|---|---|
| keyId | 數據ID的字段.一般對應數據庫的主鍵.默認: 'id' | false | id |
| keyPid | 數據父ID,與父級數據的ID相等.此參數與ID確定上下級關(guān)系. | false | pid |
| title | 泛指數據標題,來(lái)自列(cols)的field屬性.表明此字段在被點(diǎn)擊時(shí)候會(huì )展開(kāi)/折疊下級. | false | name |
| indent | 縮進(jìn)字符.在此設置的字符會(huì )添加到title列前面.次數為層級的值.效果就是層級越靠下.縮進(jìn)的越多. | false | ' ? ?' |
| icon | 標題前面的小圖標. 在展開(kāi)時(shí)候顯示的樣式使用icon.open設置, 折疊時(shí)候使用icon.close. 值是css的一個(gè)class屬性字符串.該字符串可以包含多個(gè)類(lèi). |
false | 展開(kāi): layui-icon layui-icon-triangle-d 折疊: layui-icon layui-icon-triangle-r |
| showCache | 這里就要好好說(shuō)說(shuō)了.該字段表示數據展開(kāi)折疊緩存.刷新時(shí)候可以保留上次的展開(kāi)狀態(tài) a).如果傳false表示不使用緩存.此時(shí)渲染完成的狀態(tài)為全部折疊; b).如果傳true.會(huì )把操作過(guò)程中的展開(kāi)折疊狀態(tài)記錄到 localStorage 中.key為 unfoldStatus; c).可以傳一個(gè)字符串.這時(shí)候與傳true類(lèi)似,區別是 localStorage 的 key 為傳入的字符串.建議傳字符串.可以有效避免多個(gè)頁(yè)面之間的沖突. |
false | unfoldStatus |
| sort | 排序方式,可選值為 asc / desc, 默認 asc.必須小寫(xiě).會(huì )影響所有層級. | false | asc |
![[嘻嘻]](../../t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif "[嘻嘻]")
layui.use(['tableTreeDj'], function() {
const tableTree = layui.tableTreeDj;
const $ = layui.$;
// 與 layui.table 的參數完全一致,內部本來(lái)就是把這些參數傳遞給table模塊的
const objTable = {
elem: '#test'
,url: "./getData"
,cols: [[
{field:'name', title:'名稱(chēng)' },
{field:'id', title:'ID' },
{field:'pid', title:'上級ID' },
{field:'level', title:'層級' },
{field:'agent_id', title:'代理ID' },
]]
,id:'list'
}
// 本組件用到的參數, 組件內部有默認值,與此一致,因此您可以只聲明不一致的配置項
const config = {
keyId: "id" // 當前ID
, keyPid: "pid" // 上級ID
, title: "name" // 標題名稱(chēng)字段,此字段td用于綁定單擊折疊展開(kāi)功能
, indent: ' ? ?' // 子級td的縮進(jìn).可以是其他字符
// 圖標
, icon: {
open: 'layui-icon layui-icon-triangle-d', // 展開(kāi)時(shí)候圖標
close: 'layui-icon layui-icon-triangle-r', // 折疊時(shí)候圖標
}
, showCache: true //是否開(kāi)啟展開(kāi)折疊緩存,默認不開(kāi)啟.
, sort: 'asc'
};
// 渲染
tableTree.render(objTable, config);
// 其他一系列操作后.重新渲染表格,此時(shí)可以不傳遞參數.內部記錄了上次傳入的參數.
tableTree.render();
// 點(diǎn)擊搜索按鈕后重載數據.此時(shí)可以傳入where條件.obj參數與官方表格一致.
obj = {where:{id: 1}};
tableTree.reload(obj);
});