layUI之樹狀表格異步加載組件treetableAsync.js（基于treetable.js）

概述

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

1. 使用說明

? 本組件基于treetable.js組件進(jìn)行編寫，最大的區(qū)別在treetable.js無法進(jìn)行異步加載，而本組件則使用異步加載樹狀表格。
? 因此，若無異步加載需求，建議直接使用treetable.js，有異步加載需求時，可使用本組件。
? 本組件treetableAsync.js下載地址：https://pan.baidu.com/s/1qZXi7mLJj0ZvjMd4mGbjFA 提取碼：808p
? 本組件所依賴的treetable.js下載地址：https://pan.baidu.com/s/1fx5_sFRb0Noa4NCIdDoltw 密碼：e891 （源碼有修改，因此不能使用官方下載的原版本）

2. 使用需知

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

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

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

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

? 本組件使用中的Ajax請求，基于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 組件源碼

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

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使用方式

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

1.簡介

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

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

2.使用方法

2.1.引入模塊

?下載module/treetable-lay整個文件夾，放在你的項(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這兩個字段的名稱可以自定義：

{
  "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ù) 類型 是否必填 描述
treeColIndex int 是 樹形圖標(biāo)顯示在第幾列
treeSpid object 是 最上級的父級id
treeIdName string 否 id字段的名稱
treePidName string 否 pid字段的名稱
treeDefaultClose boolean 否 是否默認(rèn)折疊
treeLinkage boolean 否 父級展開時是否自動展開所有子級

?treeColIndex

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

?treeSpid

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

?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

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

2.4.注意事項(xiàng)

  • 不能使用分頁功能，即使寫了page:true，也會忽略該參數(shù)。

  • 不能使用排序功能，不要開啟排序功能。

  • table.reload()不能實(shí)現(xiàn)刷新，請參考demo的刷新。

  • 除了文檔上寫的treetable.xxx的方法之外，其他數(shù)據(jù)表格的方法都使用table.xxx。

  • 建議刪除和修改請求完后臺之后請刷新（重新渲染）表格，最好不要使用obj.delete方式刪除。

2.5.其他方法

?全部展開

treetable.expandAll('#table1');

?全部折疊

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：

image

2.7.截圖

?樹形表格1：

樹形表格1

?樹形表格2：

樹形表格2
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,824評論 1贊 45
  • 最好的愛情是什么模樣，大概就是這般模樣，相濡以沫的時間長河里，我們相互陪伴，慢慢變老，等走不動了可以相互攙扶，相互...
    宛小風(fēng)閱讀 420評論 4贊 7
  • 我有一個朋友叫寧七，寧七有一個朋友叫管華，寧七與管華相識有十年之久，革命友誼純潔的光芒萬丈，一男一女都未談婚...
    菠蘿理想閱讀 1,144評論 22贊 32

友情鏈接更多精彩內(nèi)容