Layui常用組件：表格（table）

快速使用

<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">刪除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <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>
<script>
    layui.use(['table'], function () {
        table.render({
            elem: '#demo'
            ,url: 'url'//表格數據接口
            ,toolbar: '#toolbarDemo' //開啟頭部工具欄，並為其綁定左側模板
            ,page:true//開啟分頁
            ,loading:true//顯示加載條
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', fixed: 'left',hide:'true'}
                    ,{field:'desc', title:'描述',align:'center'}
                    ,{field:'type', title:'類型',align:'center'}
                    ,{field:'hard', title:'難度',align:'center'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:"center"}
                ]
            ]
            ,limit:10
            ,limits:[10,15,20,30]
        });
    }
</script>

table組件規定的數據格式：

{
  "code": 0,
  "msg": "",
  "count": 1000,//數據數量
  "data": [{}, {}]//數據實體
} 

---

表格重載

table.reload("demo",{
    url:'url',
    page:{
        curr:1
    }
})

---

自定義模板

table.render({
  cols: [[
    {field:'title', title: '文章標題', width: 200
      ,templet: function(d){
          //d.id,d.title:是動態內容，它對應數據接口返回的字段名
          //可以在此處編寫具體的邏輯實現一些控件的動態變化
        return 'ID：'+ d.id +'，標題：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});   

---

分頁實現

Layui在初始化表格數據時，會在url的后面附帶分頁的page和limit參數：

所以在后台編寫接口時要接收這兩個參數並編寫相應的分頁查詢

---

搜索實現

搜索的實質是表格的重載：

// 監聽搜索操作按鈕
form.on('submit(data-search-btn)', function (data) {
    //執行搜索重載
    table.reload('paperTable', {
        page: {//重新從第 1 頁開始
            curr: 1
        }
        , where: {//設定異步數據接口的額外參數
            searchId:data.field.searchId,//表單內的輸入框，name：searchId
            searchName:data.field.searchName//表單內的輸入框,name:searchName
        }
    }, 'data');
    return false;
});

點擊搜索按鈕后，異步數據接口url為：

---

事件監聽

• 監聽頭工具欄

  <script>
      table.on('toolbar(demo)', function(obj){//demo為表格lay-filter的值
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'add':
            layer.msg('添加');
          break;
          case 'delete':
            layer.msg('刪除');
          break;
          case 'update':
            layer.msg('編輯');
          break;
        };
      });
  </script>
  

• 監聽checkbox

  <script>
      table.on('checkbox(demo)', function(obj){
        console.log(obj.checked); //當前是否選中狀態
        console.log(obj.data); //選中行的相關數據
        console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
      });
  </script>
  

• 監聽單元格編輯

  <script>
      //注：edit是固定事件名，demo是table原始容器的屬性 lay-filter="對應的值"
      table.on('edit(demo)', function(obj){ 
        console.log(obj.value); //得到修改后的值
        console.log(obj.field); //當前編輯的字段名
        console.log(obj.data); //所在行的所有相關數據  
      });
  </script>
  

• 監聽行單雙擊事件

  <script>
  //監聽行單擊事件
      table.on('row(test)', function(obj){
        console.log(obj.tr) //得到當前行元素對象
        console.log(obj.data) //得到當前行數據
        //obj.del(); //刪除當前行
        //obj.update(fields) //修改當前行數據
      });
  
      //監聽行雙擊事件
      table.on('rowDouble(test)', function(obj){
        //obj 同上
      });
  </script>
  

• 監聽工具條

  <script>
      //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
      table.on('tool(test)', function(obj){ 
        var data = obj.data; //獲得當前行數據
        var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
        var tr = obj.tr; //獲得當前行 tr 的 DOM 對象（如果有的話）
        if(layEvent === 'detail'){ //查看
          //do somehing
        } else if(layEvent === 'del'){ //刪除
          //do somehing
        } else if(layEvent === 'edit'){ //編輯
          //do something
        } 
      });
  </script>