Layui Common components: table (table)

Quick

<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>

Predetermined data format table components:

{
  "code": 0,
  "msg": "",
  "count": 1000,//数据数量
  "data": [{}, {}]//数据实体
}

Table overloaded

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

Custom Templates

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}
  ]]
});

Paging achieve

Layui at initialization data table will be included with the url of the page behind the page and limit parameters:

So you want to receive these two parameters when writing interfaces in the background and prepare the corresponding paging query

Search realized

The table is the essence of search overload:

// 监听搜索操作按钮
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;
});

After clicking the Search button, asynchronous data interface url is:

Event Listeners

Monitor head Toolbar

<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>

Listener checkbox

<script>
    table.on('checkbox(demo)', function(obj){
      console.log(obj.checked); //当前是否选中状态
      console.log(obj.data); //选中行的相关数据
      console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });
</script>

Monitor cell editing

<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>

Monitor line single double-click event

<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>

Monitor toolbar

<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>