亚洲欧美一级一级a,午夜91理论片,美女班主任被强奷30分钟

文檔

介紹
使官方表格組件具備樹(shù)形結(jié)構(gòu)展示能力(忘記怎么上傳代碼包了...現(xiàn)在github與gitee上面是最新的...)

特別說(shuō)明
1. 編寫(xiě)該組件的目的是因?yàn)榭吹狡渌慕M件都或多或少的重寫(xiě)了官方原版的layui.table組件.感覺(jué)一個(gè)是增加了學(xué)習(xí)成本.一個(gè)是沒(méi)有與官方保持一致.
2. 此組件只是填充了官方表格組件的parseData()方法與done().目的是為了整理數(shù)據(jù)排序以及展示.其他沒(méi)做任何多余的工作.(您不用擔(dān)心.您可以正常使用官方為您提供的這兩個(gè)方法.)
3. 組件的getTable()方法返回了layui.table組件的實(shí)例.因此您具有了與layui.table一樣的表格操作能力.畢竟返回的本來(lái)就是layui.table.
4. 很遺憾 [委屈]

.本組件污染了原始表格.為了實(shí)現(xiàn)點(diǎn)擊折疊展開(kāi)功能.我給表格的某個(gè)字段綁定了點(diǎn)擊事件.但是除此之外我不知道該怎么做才能在實(shí)現(xiàn)展開(kāi)折疊操作時(shí)候做到不污染原始表格.可能會(huì)給您帶來(lái)困擾.
4.1 建議將 title 字段設(shè)置為用戶(hù)平時(shí)不點(diǎn)擊的字段以期將影響降低到最小 [微笑]

引入

組件引入方法請(qǐng)閱讀官方文檔
https://www.layui.com/doc/base/modules.html#extend

方法

方法名	描述
render	表格渲染.一般第一次顯示調(diào)用.或者其他操作比如刪除/添加等操作后也可以調(diào)用.第二次調(diào)用可以不傳參數(shù).如果傳遞參數(shù)會(huì)將上次參數(shù)覆蓋.
reload	表格重載,內(nèi)部調(diào)用了table.reload().一般用于搜索后顯示數(shù)據(jù).提交where條件給后端.
getTable	由于該組件內(nèi)部使用了layui.table.如果想更細(xì)粒度的操作table.可以使用此方法獲取table對(duì)象
其他方法	請(qǐng)閱讀源碼,只要方法名不以下劃線(xiàn)開(kāi)頭都可以使用.如果需要的話(huà).

參數(shù)

名稱(chēng)	描述	必填	默認(rèn)值
keyId	數(shù)據(jù)ID的字段.一般對(duì)應(yīng)數(shù)據(jù)庫(kù)的主鍵.默認(rèn): 'id'	false	id
keyPid	數(shù)據(jù)父ID,與父級(jí)數(shù)據(jù)的ID相等.此參數(shù)與ID確定上下級(jí)關(guān)系.	false	pid
title	泛指數(shù)據(jù)標(biāo)題,來(lái)自列(cols)的field屬性.表明此字段在被點(diǎn)擊時(shí)候會(huì)展開(kāi)/折疊下級(jí).	false	name
indent	縮進(jìn)字符.在此設(shè)置的字符會(huì)添加到title列前面.次數(shù)為層級(jí)的值.效果就是層級(jí)越靠下.縮進(jìn)的越多.	false	' ? ?'
icon	標(biāo)題前面的小圖標(biāo). 在展開(kāi)時(shí)候顯示的樣式使用icon.open設(shè)置, 折疊時(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ō)了.該字段表示數(shù)據(jù)展開(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)似,區(qū)別是 localStorage 的 key 為傳入的字符串.建議傳字符串.可以有效避免多個(gè)頁(yè)面之間的沖突.	false	unfoldStatus
sort	排序方式,可選值為 asc / desc, 默認(rèn) asc.必須小寫(xiě).會(huì)影響所有層級(jí).	false	asc

有沒(méi)有發(fā)現(xiàn)全部都不是必填項(xiàng) [嘻嘻]

效果圖

代碼示例

layui.use(['tableTreeDj'], function() {
        const tableTree = layui.tableTreeDj;
        const $ = layui.$;

        // 與 layui.table 的參數(shù)完全一致,內(nèi)部本來(lái)就是把這些參數(shù)傳遞給table模塊的
        const objTable = {
            elem: '#test'
            ,url: "./getData"
            ,cols: [[
                {field:'name', title:'名稱(chēng)' },
                {field:'id', title:'ID' },
                {field:'pid', title:'上級(jí)ID' },
                {field:'level', title:'層級(jí)' },
                {field:'agent_id', title:'代理ID' },
            ]]
            ,id:'list'
        }

        // 本組件用到的參數(shù), 組件內(nèi)部有默認(rèn)值,與此一致,因此您可以只聲明不一致的配置項(xiàng)
        const config = {
            keyId: "id" // 當(dāng)前ID
            , keyPid: "pid" // 上級(jí)ID
            , title: "name" // 標(biāo)題名稱(chēng)字段,此字段td用于綁定單擊折疊展開(kāi)功能
            , indent: ' ? ?' // 子級(jí)td的縮進(jìn).可以是其他字符
            // 圖標(biāo)
            , icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展開(kāi)時(shí)候圖標(biāo)
                close: 'layui-icon layui-icon-triangle-r', // 折疊時(shí)候圖標(biāo)
            }
            , showCache: true //是否開(kāi)啟展開(kāi)折疊緩存,默認(rèn)不開(kāi)啟.
            , sort: 'asc'
        };
        // 渲染 
        tableTree.render(objTable, config);

        // 其他一系列操作后.重新渲染表格,此時(shí)可以不傳遞參數(shù).內(nèi)部記錄了上次傳入的參數(shù).
        tableTree.render();
        
        // 點(diǎn)擊搜索按鈕后重載數(shù)據(jù).此時(shí)可以傳入where條件.obj參數(shù)與官方表格一致.
        obj = {where:{id: 1}};
        tableTree.reload(obj);
    });

下載

去碼云下載去 GitHub 下載

該擴(kuò)展組件由第三方用戶(hù)主動(dòng)投遞，并由其自身進(jìn)行維護(hù)，本站僅做收集。

layui 第三方組件平臺(tái)

基于 layui 表格的樹(shù)形擴(kuò)展 tableTreeDj

文檔

下載