h5学习笔记：layui table

最近在做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:'
{{ d.sex==0? "男":"女" }}
'},
      {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">
  class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  删除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('编辑行：
'+ 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属性，但借助了这个可以很巧妙和监听行为结合在一起。

class="demoTable">
   class="layui-btn" data-type="batchdel" >删除
   class="layui-btn" data-type="add">添加
 

监听行为使用，通过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 编辑和 一些逻辑上的模版处理。所以这个流程先将其记录下来。并用于日后使用。