layui动态表格详解

发布时间：2023-05-19

一、layui动态表格日期

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

<table id="demo" lay-filter="test"></table>
<script>
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');
      }}
    ]]
  });
});
</script>

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

二、layui动态表格监听input

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

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

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

三、layui动态表格分页

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

<table id="demo" lay-filter="test"></table>
<script>
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}
    ]]
  });
});
</script>

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

四、layui动态表格输入框

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

<table id="demo" lay-filter="test"></table>
<script>
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); //所在行的所有相关数据
    //提交后台
  });
});
</script>

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

五、layui动态表格乱码

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

<table id="demo" lay-filter="test"></table>
<script>
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'
  });
});
</script>

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

六、layui动态表格图片上传

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

<table id="test" lay-filter="demo"></table>
<script>
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('上传失败，请检查网络');
    }
  });
}); 
</script>

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

七、layui动态表格怎么传参

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

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

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

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

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

<script>
//日期选择器绑定
table.render({
    elem: "#tableTest5",
    id: "..."
});
</script>
推荐文章