[轉]layui數據表格（一：基礎篇，數據展現、分頁組件、表格內嵌表單和圖片）

表格展現神器之一：layui表格

前言：在寫後臺管理系統中使用最多的就是表格數據展現了，使用表格組件能提升大量的開發效率，目前主流的數據表格組件有bootstrap table、layui table、easyUI table等.... 博主我的比較傾向於layui，layui極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈。使用簡單引用模塊便捷，有豐富的擴展功能。  

layui官網： https://www.layui.com/

bootstrap datatable中文文檔： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/    

目錄： 　　1、三種渲染表格的方式 　　2、在表格中添加編輯等按鈕 　　3、在表格中添加 表單控件 　　4、添加圖片展現

  最終效果圖： 點擊圖片效果   點擊編輯   1、三種初始化渲染方式

　我先從最簡單的初始化表格寫起，若是我直接把所有代碼帖出來，大家可能會看得頭暈   1，方法渲染：

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

 

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 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
            ,skin: 'line ' //表格風格 line （行邊框風格）row （列邊框風格）nob （無邊框風格）
          　//,even: true    //隔行換色
            ,page: true  //開啓分頁
            ,limits: [10,20,50]  //每頁條數的選擇項，默認：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每頁默認顯示的數量
            ,method:'post'  //提交方式
         　　,cols: [[
                {type:'checkbox'}, //開啓多選框
                {
                    field: 'menuId', //json對應的key
                    title: 'ID',   //列名
                    sort: true   // 默認爲 false,true爲開啓排序
                }
            ]]
        });
    });

java後臺返回的json數據格式

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

 2，自動渲染方法 （如下代碼由官方提供，自動渲染的方法 適合複雜行頭時使用，通常建議使用上面的方法渲染）

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用戶名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性別</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">簽名</th>
      <th lay-data="{field:'experience', sort: true}">積分</th>
      <th lay-data="{field:'score', sort: true}">評分</th>
      <th lay-data="{field:'classify'}">職業</th>
      <th lay-data="{field:'wealth', sort: true}">財富</th>
    </tr>
  </thead>
</table>

 

    　　二，如何添加編輯按鈕

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 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
            ,skin: 'line ' //表格風格 line （行邊框風格）row （列邊框風格）nob （無邊框風格）
          　//,even: true    //隔行換色
            ,page: true  //開啓分頁
            ,limits: [10,20,50]  //每頁條數的選擇項，默認：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每頁默認顯示的數量
            ,method:'post'  //提交方式
,done: function(res, curr, count) { //表格數據加載完後的事件
    //調用示例
    layer.photos({//點擊圖片彈出
        photos: '.layer-photos-demo'
        ,anim: 1 //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0以前的版本用shift參數）
    });
    //若是是異步請求數據方式，res即爲你接口返回的信息。
    //若是是直接賦值的方式，res即爲：{data: [], count: 99} data爲當前頁數據、count爲數據總長度
    console.log(res);

    //獲得當前頁碼
    console.log(curr);

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

   

<script type="text/html" id="barDemo">  // id和toolbar 屬性綁定
     <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>

    三，如何在表格中添加表單組件（如下我將推薦2種）   1，使用模塊引擎的方式（這種方法比較麻煩，我的推薦第二種）

<!--  是否顯示 -->
<script type="text/html" id="isShow">  // 請注意 id之間的關聯
    {{#  if(d.menuDisplay === 'Y'){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="顯示|隱藏" lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="顯示|隱藏" lay-filter="isShow" >
    {{#  } }}
</script>

   

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

  2，使用 函數的方法  

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

    unresize: true,
    filter: "isShow",
    sort: false,
    templet: function (d) {
        if (d.menuDisplay == ‘Y’) {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "顯示|隱藏"
            lay - filter = "isShow" > `;
        } else {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "顯示|隱藏"
            lay - filter = "isShow"
            checked > `;
        }
    }
}

    4、 展現圖片

　　　　　　　　{
                    field: 'img',
                    title: '圖片',
                    unresize: true,
                    sort: false,
                    //style:'height:100px;',
                    templet:function (d) {
                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">
                                      <img layer-pid="圖片id，能夠不寫"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="圖片名">
                                    </div>`;
                    }
                }

  當表格數據加載完後再綁定屬性