最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。

一 、Table 元件

Table元件可以採用官方提供的三種方式來獲取資料。官方推薦js一種。這樣定義一個table元件。定義一個id 和lay-filter

<table id="demo" lay-filter="test"></table>

接下來，還要新增js欄位讓資料展示出來。

<script>
layui.use('table'
 
, function(){
  var table = layui.table;

  //第一個例項
  table.render({
    elem: '#demo',
    height: 315,
    url: "{:url('admin/example/read')}", //資料介面
    page: true, //開啟分頁
    id: 'testReload',//資料搜尋，這個過程會發送後端
    cols: [[ //表頭
      {type:'checkbox',fixed: true},   
      {field: 'id', title: 'ID', width:80
 
, sort: true,fixed: true},
      {field: 'name', title: '姓名', width:80},
      {field: 'sex', title: '性別', width:80, sort: true,templet:'<div>{{ d.sex==0? "男":"女" }}</div>'},
      {field: 'telephone', title: '電話', width:80} ,
      {field: 'email', title: '郵件', width: 177},
      {field: 'leader'
 
, title: '法人', width: 80},
      {field: 'create_time', title: '建立時間', width: 180, sort: true},
      {fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}
    ]],
  });

  </script>

二 、定義Table 模版

Tabel元件採用js這個方案的時候，特別在表格需要經常編輯，刪除等常規的操作，layui提供了一個模版操作方式。可以為此新增一個text/html 模版

在每一個欄位列加上一個toolbar的欄位，指定為工具欄，然後將定義的模版關聯起來。

 {fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
  <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>

並且需要將text/html 作為一個模版使用。有趣的是，這個模版裡面還需要對編輯操作加上事件處理。例如官方引入提供的lay-event=“edit” 編輯，lay-event =“del” 刪除的含義。

三 、新增Table 元件js互動

有了表格中常規化的操作，編輯，刪除接下來，還要處理這些行為。這個時候，需要使用layui的on方法進行事件監聽。這個監聽會對整個表格監聽。根據事件不同的型別，然後對裡面的行為進行分別處理。

  //監聽事件,填寫lay-filter才能排程
  table.on('tool(test)', function(obj){
    var data = obj.data;
     if(obj.event === 'del'){


    } else if(obj.event === 'edit'){


    }
  });

然後根據點選裡面的事情進行編輯，如彈窗，刪除的邏輯等等。

  //監聽事件,填寫lay-filter才能排程
  table.on('tool(test)', function(obj){
    var data = obj.data;
     if(obj.event === 'del'){
      layer.confirm('真的刪除行麼', function(index){

        deleteData([data.id],function(){         
            obj.del();
            layer.close(index);
            layer.msg('刪除成功');
        })
      });

    } else if(obj.event === 'edit'){
     // layer.alert('編輯行：<br>'+ JSON.stringify(data))
      //跳轉
           layer.open({
          type: 2
          ,title: '編輯資料'
          ,content: "{:url('admin/example/edit_view')}"
          ,area: ['433px', '393px']
          ,btn: ['確定', '關閉']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-user-back-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //監聽提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //獲取提交的欄位

              //提交 Ajax 成功後，靜態更新表格中的資料
              //$.ajax({});
              table.reload('LAY-user-front-submit'); //資料重新整理
              layer.close(index); //關閉彈層
            });  

            submit.trigger('click');
          },
          success: function (layero, index) {
           // alert(JSON.stringify(data));
             //查詢資料傳遞
             var body = layer.getChildFrame('body', index);  
              var iframeWin = window[layero.find('iframe')[0]['name']];
              body.find("input[name='name']").val(data.name);
              body.find("input[name='sex']").each(function(index,item){                     
                    if(index == data.sex)
                    {
                      $(this).prop("checked","checked");
                    }
              });

              body.find("input[name='telephone']").val(data.telephone);  
              body.find("input[name='email']").val(data.email);  
              body.find("input[name='leader']").val(data.leader);  
              iframeWin.layui.form.render();//渲染才行
          }
        }); 



    }
  });

四 、 Table 中全選

Tabel需要進行批量刪除選中的資料時候，Table元件提供了這個簡單函式。很多時候，後臺刪除的時候需要指定對應id，於是在table選中的過程中提供了checkStatus的方法。然後獲取到data值，再通過遍歷迴圈一次，將選中的id 返回一個數組。
用於傳送給後端刪除使用。

  //獲取table選中的ID值
  function getSelectIds(){
    var checkStatus = table.checkStatus('testReload'),
        data = checkStatus.data,
        delList=[];
        data.forEach(function(n,i){
          delList.push(n.id);
        });
    return delList;
  }

五 、 Table 中批量刪除

選擇了對應的ID，有了這個組後，可以傳送後端進行刪除處理。

  var $ = layui.$, active = {

        batchdel:function(){
          //處理批量刪除
          var checkData =  getSelectIds();
          if(checkData.length === 0){
            return layer.msg('請選擇資料');
          }

          layer.confirm('確定刪除嗎？', function(index) {

            deleteData(checkData,function(){
                table.reload('testReload');
                layer.msg('已刪除');
            })});
        }

    }


//搜尋型別
 $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
  });

   //刪除資料
  function deleteData(idArr,callback){

    $.post("{:url('admin/example/delete')}",{ids:idArr},function(data){
        if(data.code == 0)
        {
           callback();
        }else{
          layer.msg(data.msg)
        }  
    })

  }

六 、 按鈕型別定義

layui 有一個比較有趣的地方，在開始的時候一直看不懂，然後發現layui對按鈕加以一個型別方式，並且這個型別方式可以很巧妙結合一個回撥處理。從下面的程式碼可以看到 對按鈕定義一個button data-type 的型別，這個型別看起來只是一個常規dataset屬性，但藉助了這個可以很巧妙和監聽行為結合在一起。

<div class="demoTable">
   <button class="layui-btn" data-type="batchdel" >刪除</button>
   <button class="layui-btn" data-type="add">新增</button>
</div> 

監聽行為使用，通過jq監聽click時間，並且指明layui-btn這類按鈕。對一些有型別宣告的，可以呼叫call方法去完成一個函式排程。所以在這裡也是設計得很巧妙。

 $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
  });

七 、 表格中彈窗

layui 裡面提供一個比較好用彈窗功能，這個彈窗元件使用的頻率比較高，可以結合模版頁面使用。使用的時候，先編輯一個表單頁面。當需要從視窗傳遞過去的時候，這個時候就要在success 回撥的時候 通過jq搜尋子視窗的表單進行傳遞數值。
當中也遇到了一些比較坑的地方。例如radio 使用prop，而不是attr 方式對其賦值。

          layer.open({
          type: 2
          ,title: '編輯資料'
          ,content: "{:url('admin/example/edit_view')}"
          ,area: ['433px', '393px']
          ,btn: ['確定', '關閉']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-user-back-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //監聽提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //獲取提交的欄位

              table.reload('LAY-user-front-submit'); //資料重新整理
              layer.close(index); //關閉彈層
            });  

            submit.trigger('click');
          },
          success: function (layero, index) {
           // alert(JSON.stringify(data));
             //查詢資料傳遞
             var body = layer.getChildFrame('body', index);  
              var iframeWin = window[layero.find('iframe')[0]['name']];
              body.find("input[name='name']").val(data.name);
              body.find("input[name='sex']").each(function(index,item){                     
                    if(index == data.sex)
                    {
                      $(this).prop("checked","checked");
                    }
              });

              body.find("input[name='telephone']").val(data.telephone);  
              body.find("input[name='email']").val(data.email);  
              body.find("input[name='leader']").val(data.leader);  
              iframeWin.layui.form.render();
          }
        }); 

製作過程，賦予資料的時候 有一些小坑，需要在新增render。官方文件據說有提及，怪自己沒詳情看。

    var body = layer.getChildFrame('body', index);  
    var iframeWin = window[layero.find('iframe')[0]['name']];

由於這兩句也在社群那裡獲取到，意為獲取iframe 的視窗。總體來講，完成一個table 的元件，需要經過很多js 編輯和 一些邏輯上的模版處理。所以這個流程先將其記錄下來。並用於日後使用。