layui动态表格详解

一、layui动态表格日期

在实际项目开发中，经常需要在表格中展示日期数据。 layui提供了非常方便的日期格式化功能，只需要在对应表格列的templet属性中加入格式化字符串即可。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'email', title:'邮箱', width:150}
      ,{field:'sign', title:'签名'}
      ,{field:'sex', title:'性别'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'积分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次数', width:100, sort: true}
      ,{field:'joinTime', title:'加入时间', width:120, sort: true, templet: function(d){
        return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
      }}
    ]]
  });
});
&lt;/script&gt;

以上代码演示了在表格中展示某用户加入时间的日期格式化操作。templet属性中传入函数，使用Layui自带的util.toDateString函数对日期格式化。

二、layui动态表格监听input

表格中的输入框改变后需要做一些操作，如实时更新本地数据或请求后端接口保存数据。Layui提供了监听表格input事件的方法。

table.on('edit(test)', function(obj){
  var value = obj.value //得到修改后的值
  ,data = obj.data //得到所在行所有键值
  ,field = obj.field; //得到字段
  //后续操作...
});

以上代码演示了监听表格test中所有input的修改事件，代码里面可以根据需求进一步操作。

三、layui动态表格分页

表格分页是Layui表格组件非常重要的一个功能，可以轻松地实现数据展示效果与用户体验的平衡。而在Layui中设置分页也是一件非常方便的事情。只需要在表格渲染时定义page属性即可。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'email', title:'邮箱', width:150}
      ,{field:'sign', title:'签名'}
      ,{field:'sex', title:'性别'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'积分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次数', width:100, sort: true}
      ,{field:'joinTime', title:'加入时间', width:120, sort: true}
    ]]
  });
});
&lt;/script&gt;

以上代码演示了在表格中添加分页的代码，需要将page属性设置为true。当然，在实际使用中，我们还可以对分页进行自定义设置。如设置每页展示数量、添加分页信息提示语等。

四、layui动态表格输入框

输入框是常见的表格组件，Layui为表格中的输入框提供了非常方便的模板渲染方式。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  //同时绑定多个表格渲染
  table.render({
    elem: '#demo1'
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "2016-10-14"
    },{
      "id": "10002"
      ,"username": "李白"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }]
    ,page: true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:120, edit: 'text'}
      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
      ,{field:'city', title:'城市', edit: 'text'}
      ,{field:'experience', title:'积分', width:80, edit: 'text', sort: true}
      ,{field:'ip', title:'IP', width:120, edit: 'text'}
      ,{field:'logins', title:'登入次数', width:100, edit: 'text', sort: true}
      ,{field:'joinTime', title:'加入时间', width:120}
    ]]
  });
  
  //监听单元格编辑
  table.on('edit(test)', function(obj){
    console.log(obj.field); //当前编辑的字段名
    console.log(obj.value); //当前编辑的值
    console.log(obj.data); //所在行的所有相关数据
   
    //提交后台
  });
});
&lt;/script&gt;

以上代码演示了如何渲染一个带有输入框的表格，需要在对应的列设置edit属性，并在对应单元格渲染函数中添加edit属性值，此时表格对应单元格将会渲染一个输入框。同时，需要监听表格中所有的编辑事件，并在回调函数中进行处理。

五、layui动态表格乱码

在前后端分离的开发中，数据传输往往采用异步传输，ajax传递的JSON数据格式是UTF-8的。当我们出现中文乱码时，需要指定编码格式为UTF-8。

<table id="demo" lay-filter="test"></table>
&lt;script&gt;
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'
    ,page:true
    ,cols: [[
      {field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'email', title:'邮箱', width:150}
      ,{field:'sign', title:'签名'}
      ,{field:'sex', title:'性别'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'积分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次数', width:100, sort: true}
      ,{field:'joinTime', title:'加入时间', width:120, sort: true, templet: function(d){
        return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
      }}
    ]]
    ,text: {
        none: '暂无相关数据'
    }
    ,contentType: 'application/json; charset=utf-8'
    ,dataType: 'json'
  });
});
&lt;/script&gt;

以上代码演示了contentType和dataType的设置，使用contentType指定请求数据格式为'application/json; charset=utf-8'，使用dataType指定数据解析格式为json。

六、layui动态表格图片上传

表格中涉及到图片上传操作的时候，Layui提供了非常方便的方式。

<table id="test" lay-filter="demo">
&lt;script&gt;
layui.use(['table', 'upload'], function(){
  var table = layui.table;
  var upload = layui.upload;
  
  //单元格渲染
  table.render({
    elem: '#test'
    ,url: '/demo/table/user/'
    ,cols: [[
      {checkbox: true}
      ,{field:'id', title:'ID', width:80}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
      ,{field:'sign', title:'签名'}
      ,{field:'sex', title:'性别'}
      ,{field:'city', title:'城市'}
      ,{field:'experience', title:'积分', width:80, sort: true}
      ,{field:'ip', title:'IP'}
      ,{field:'logins', title:'登入次数', width:100, sort: true}
      ,{field:'joinTime', title:'加入时间', width:120, sort: true
        ,templet: function(d){
          return layui.util.toDateString(d.joinTime, 'yyyy-MM-dd HH:mm:ss');
        }
      }
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
    ,page: true
    ,id: 'testReload'
    ,response: {
        statusCode: 200 //规定成功的状态码，默认：0
    }
    ,toolbars: [{
      icon: 'layui-icon-upload'
      ,title: '批量上传'
      ,event: 'uploadImg'
    }]
  });
  
  //上传图片
  upload.render({
    elem: '#test'
    ,url: '' //图片上传接口
    ,method: 'post'
    ,accept: 'images'
    ,auto: false
    ,bindAction: '.uploadImg'
    ,headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer '+ sessionStorage.getItem('token')
    }
    ,done: function(res){
      console.log(res)
    }
    ,error: function () {
      layer.msg('上传失败，请检查网络');
    }
  });
}); 
&lt;/script&gt;

以上代码演示了涉及图片上传图片预览的Layui表格代码实现方式。需要在对应列中添加toolbar属性，并在建造表格的时候添加toolbars属性，同时对应单元格需要添加manage属性并使用上传文件组件进行上传操作。

七、layui动态表格怎么传参

Layui动态表格可以通过params参数和where参数进行参数传递。其中，params发生在最初始的请求上，而where参数则是发生在数据重载时的参数。

//params参数传递
table.render({
  elem: "#demo"
  ,url: "url"
  ,params: {
    test: 123
  }
  ,where: {
    test: 123
  }
})

以上代码对两种情况的参数进行了展示，params直接在定义表格的时候对请求的params进行定义，而where在数据重载时进行定义。

八、layui动态表格日期选择器

Layui的日期选择器非常方便易用，同时与Layui表格的结构衔接地非常紧密。我们可以在表格的渲染函数中对需要使用到时间的列添加lay-event属性为date，然后在监听事件中对其进行日期选择器的绑定。

//日期选择器绑定
table.render({
    elem: "#tableTest5"
    ,id: "