如何使用layui的數(shù)據(jù)表格？針對這個問題，這篇文章給出了相對應(yīng)的分析和解答，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)秀英,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

layui是一款采用自身模塊規(guī)范編寫的前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。平常我們經(jīng)常用到的表單排版方式常見的有兩種，layui文檔中已經(jīng)給出垂直的排版方式，我們做后臺的時候也會用到水平排版方式,用于在頁面的頂部進(jìn)行搜索的時候用到。

使用表格組件能提高大量的開發(fā)效率，目前主流的數(shù)據(jù)表格組件有bootstrap table、layui table、easyUI table等，本教程推薦使用layui框架設(shè)置數(shù)據(jù)表格。

一，如何在表格中添加表單組件（以下我將推薦2種）

1，使用模塊引擎的方式（這種方法比較麻煩，個人推薦第二種）

{   //在表格對象cols屬性中添加
    field: 'menuDisplay',  /
    title: '是否顯示',
    templet: '#isShow', //模板關(guān)聯(lián)以上定義的
    unresize: true,
    filter: "isShow",
    sort: false
}

2，使用 函數(shù)的方法

{
    field: 'menuDisplay',
    title: '是否顯示',

    unresize: true,
    filter: "isShow",
    sort: false,
    templet: function (d) {
        if (d.menuDisplay == ‘Y’) {
            return`  `;
        } else {
            return`  `;
        }
    }
}

二、三種初始化渲染方式

我先從最簡單的初始化表格寫起，如果我直接把全部代碼帖出來，你們可能會看得頭暈

1，方法渲染：

var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模塊
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //請求路徑
            cellMinWidth: 20 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
            ,skin: 'line ' //表格風(fēng)格 line （行邊框風(fēng)格）row （列邊框風(fēng)格）nob （無邊框風(fēng)格）
          　//,even: true    //隔行換色
            ,page: true  //開啟分頁
            ,limits: [10,20,50]  //每頁條數(shù)的選擇項，默認(rèn)：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每頁默認(rèn)顯示的數(shù)量
            ,method:'post'  //提交方式
         　　,cols: [[
                {type:'checkbox'}, //開啟多選框
                {
                    field: 'menuId', //json對應(yīng)的key
                    title: 'ID',   //列名
                    sort: true   // 默認(rèn)為 false,true為開啟排序
                }
            ]]
        });
    });

java后臺返回的json數(shù)據(jù)格式

{
code: 0, 
count: 8,  //總行數(shù)
data: [,…], //表格數(shù)據(jù)
msg: ""
}

2，自動渲染方法 （以下代碼由官方提供，自動渲染的方法 適合復(fù)雜行頭時使用，一般建議使用上面的方法渲染）

  

    

      
ID
      
用戶名
      
性別
      
城市
      
簽名
      
積分
      
評分
      
職業(yè)
      
財富
    
  

三，如何添加編輯按鈕

var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模塊
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //請求路徑
            cellMinWidth: 20 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
            ,skin: 'line ' //表格風(fēng)格 line （行邊框風(fēng)格）row （列邊框風(fēng)格）nob （無邊框風(fēng)格）
          　//,even: true    //隔行換色
            ,page: true  //開啟分頁
            ,limits: [10,20,50]  //每頁條數(shù)的選擇項，默認(rèn)：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每頁默認(rèn)顯示的數(shù)量
            ,method:'post'  //提交方式
,done: function(res, curr, count) { //表格數(shù)據(jù)加載完后的事件
    //調(diào)用示例
    layer.photos({//點擊圖片彈出
        photos: '.layer-photos-demo'
        ,anim: 1 //0-6的選擇，指定彈出圖片動畫類型，默認(rèn)隨機（請注意，3.0之前的版本用shift參數(shù)）
    });
    //如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。
    //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
    console.log(res);

    //得到當(dāng)前頁碼
    console.log(curr);

    //得到數(shù)據(jù)總量
    console.log(count);
}
  　　,cols: [[ {type:'checkbox'}, //開啟多選框  { field: 'menuId', //json對應(yīng)的key title: 'ID', //列名 sort: true // 默認(rèn)為 false,true為開啟排序  },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //綁定按鈕組 } ]] }); });
//監(jiān)聽工具條
table.on('tool(dataTable)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
    var data = obj.data //獲得當(dāng)前行數(shù)據(jù)
            ,layEvent = obj.event; //獲得 lay-event 對應(yīng)的值
    if(layEvent === 'detail'){
　　　　 layui.alert(JSON.stringifr(data)) ; //將編輯的行信息轉(zhuǎn)為json字符串
        layer.msg(data.attrId);
    } else if(layEvent === 'del'){
        layer.msg('刪除'+data.menuId);
        console.log(table)
    } else if(layEvent === 'edit'){
       
    });
    }
});

四、 展示圖片

{
                    field: 'img',
                    title: '圖片',
                    unresize: true,
                    sort: false,
                    //style:'height:100px;',
                    templet:function (d) {
                        return `

                                      
                                    
`;
                    }
                }

關(guān)于如何使用layui的數(shù)據(jù)表格就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。