3、layui基础（数据表格 tabel）

一、快速使用

 

layui.use("tabel",function{

    var tabel= layui.tabel;

   tabel.render({

         elem:"#demo",  // <tabel id="demo"></table>

         url:'js/user.json',//数据接口

       height:400,//容器的高度

         page:'true',//开启分页

         cols:[[ //表头

                    {field:'id',title:'用户编号',sort:true,width:80},

                    {field:'username',title:'用户姓名',width:100},

                    {field:'sex',title:'性别',sort:true,width:80},

                    {field:'city',title:'城市',width:100},

                    {field:'sign',title:'签名',width:100},

 

                ]],  //fileld对应数据接口对应的字段

        })

})

 

二、三种初始化渲染方式

 

　　1、方法渲染(一般使用这个方法)

      　　快速使用（上面讲）: 将基础参数放在js中，且原始table标签只需要一个选择器。

 

　　2、自动渲染 

　　　　html配置，自动渲染 ，无需写过多的js，可专注表头部分

 

　　 1)带有class="layui-tabel" 的<table>

　　 2)对标签设置属性lay-data="”用于配置基础参数

　　 3)在<tr>标签中设置属性lay-data="”用于配置表头信息

 

　　<tabel class="layui-tabel" lay-data="{url:'user.json',page:true}">

　　<tr lay-data="{field:'id',width:80}"></tr>

 　　<tr lay-data="{field:'username'}"></tr>

  　　<tr lay-data="{field:'sex',sort:true}"></tr>

　　</table>

 

　　2、转换静态表格

　　　　转换一段已有的表格元素，无需配置数据接口 ，在js中指定表格元素，并简单地给表头加上自定义属性即可

 

　　　　<tabel lay-filter="dome">

  　　　　  <thead>

      　　　　<th>

          　　　　  <tr lay-data="{field:'id'}"></tr>

        　　　　    <tr lay-data="{field:'username'}"></tr>

         　　　　  <tr lay-data="{field:'sex',sort:true}"></tr>

       　　　 </th>

   　　　　</thead>

    　　 <tbody>

     　　　　   <tr>

           　　　　  <td>开得飞快</td>

            　　　　<td>258963</td>

            　　　　<td>人长久是否觉得对方</td>

       　　　　 </tr>

   　　</tbody>

　　</table>

 

　　//执行用于转换表格js方法

　　　　layui.use("tabel",function{

 　　　　   var tabel= layui.tabel;

    //转换静态表格

       　　tabel.init('demo',{

         　　height：315,//设置高度

             　　   //支持所有基础参数

      　　  });

　　})

 

 

二、基础参数的使用场景

 

　　cols - 表头参数 -查看

 

　　lay-event给元素绑定事件名

 

　　1、开启分页和开启工具栏

 

　　　　开启分页 page：ture，

　　　　设置表格工具栏toobar:“#toolbar”

 

　　　　{field:'',type:'checkbox'}, //type列的类型,列隐藏 hide:true

　　　　{field:'',typ:'numbers'},

　　　　{field:'操作',toobar:'#tool'},//绑定表格工具栏

 

　　2、监听头工具栏事件

 

　　　　<tabel lay-filter="demo"></tabel>

　　　　tabel.on('toolbar(demo)',function(obj){

 

 　　　　 //obj.config对象中可以获取id的属性值，即表示当前容器id属性值，也就是demo

 　　　　 //获取当前表格被选中记录对象，返回数据

　　　　　var checksatatus = tabel.checkStatus(obj.config.id);

 

　　　　  //获取事件名 lay-event的属性值

   　　　　 var eventName =obj.event;

 

  　　　　//判断事件名执行对应的代码

 

   　　　　 switch(eventName){

   　　　　     case "getCheckData":

    　　　　        //获取被选中的记录的数组

     　　　　       var arr = checksatatus.data;

      　　　　      //将数组解析成字符串

        　　　　    layer.alert(JSON.stringify(arr));

    　　　　    break;

 

      　　　　  case "getCheckLength":

        　　　　    //获取被选中的记录的数组

       　　　　     var arr = checksatatus.data;

      　　　　      layer.msg("选中了"+arr.length+"条记录！");

   　　　　     break;

 

       　　　　 case "isAll":

         　　　　    //通过isAll属性判断是否全选

          　　　　var flag = checksatatus.isAll;

            　　    var str = flag ? '全选' : '未全选';

 

             　　　　layer.msg(str);

        　　　　　　break;

        

   　　　　　　}

　　　　})

　　　　解释：‘demo’是容器tabel上面lay-filter属性值

 

　　3、监听行工具栏事件

 

　　　　tabel.on('tool(demo)',function(obj){

 

  　　　　//得到相关行的操作信息

  　　　　var tr = obj.data;

 

　　　　  //得到事件名 lay-event的属性值

 　　　　 var eventName =obj.event;

 

  　　　　//判断事件名执行对应的事件方法

 　　　　   if(eventName == "del") { //删除

  　　　　//确认框

  　　　　    layer.confirm("您确认要删除吗？",function(index){

    　　　　      //删除指定tr del()

   　　　　         obj.del();

     　　　　     //关闭弹出层（index是当前弹出层的下标）

     　　　　       layer.close(index);

                

   　　　　})

    

 

  　　　　  }else if（eventName =='edit'）{ //编辑

     　　　　   //输入框

      　　　　  layer.prompt({

 

       　　　　     //表单元素的类型 0-文本框;1-密码框;2-文本域

        　　　　    formType:0,

         　　　　   value:tr.username, //设置输入框的值

 

     　　　　   },function(value,index){

      　　　　　　//修改指定单元格的值，value表示修改后的值

                

          　　　　　　  obj.update({

               　　　　　　 username:value

         　　　　　　   });

          　　　　　　　　layer.close(index); //关闭弹出层

 　　　　　　       })

 　　　　   }

　　　　});

 

　　4、开启单元格编辑---监听单元格事件

 

　　　　开启单元格编辑在表头设置edit:'text'属性，单元格编辑类型（默认不开启）目前只支持：text(输入框)

 

　　　　　　tabel.on('edit(test)',function(obj){

 　　　　　　   //获取修改后的值

  　　　　　　  var value = obj.value;

   　　　　　　 //得到当前修改的对象

   　　　　　　 var data = obj.data;

 　　　　　　   //得到修改的字段名

 　　　　　　   var field = data.field;

 　　　　　　　　   layer.msg("[ID:"+data.id+"]的"+field+"字段的值修改为"+value);

　　　　　　})

 

　　5、数据表格的重载 (搜索等)

 

　　　　在layui.use()里引入 jquery对象：var $ = layui . jquery;

 

　　　　//给指定元素绑定事件

　　　　$(document).on('click','#seacrchBtn',function(data){

 　　　　  //获取搜索文本框对象

  　　　　  var search = $("#demoReload")；

 

 　　　　//调用数据表格的重载方法   table.reload(ID,options) 

　　　　table.reload('demo',{

  　　　　　　where:{  //设置需要传递的参数

   　　　　　　    id：search.val()  //多个搜索框可写多个值

       

  　　　　　　},

   　　　　　　 page:{

        　　　　　　//让条件查询从第一页开始，如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选

    　　　　　　　　curr：1, //从第一页开始

　　　　　　　　}

 　　　　　　})

　　　　　})