layui table组件常见用法总结-猿码集

一、概述

layui是一款快速开发模块化的前端UI框架，table组件是其重要的组成部分之一。通过table组件，我们可以快速实现响应式表格的构建。本文旨在介绍layui table组件的常见用法，帮助开发者快速掌握table组件的使用。

二、基本使用

1.引入依赖

在使用table组件前，需要引入layui的依赖文件，包括layui.js和layui.css文件。


<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2.创建表格

创建表格需要用到html元素和js代码，可以使用基本的html元素来创建一个table，如：


<table class="layui-table">
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
</table>

也可以使用layui的table模块来创建，如：


<table id="demo" lay-filter="test"></table>
[xss_clean]
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    cols: [[ //标题栏
      {field: 'id', title: 'ID', width:100, sort: true},
      {field: 'username', title: '用户名', width:100},
      {field: 'sex', title: '性别', width:100, sort: true},
      {field: 'city', title: '城市', width:100},
      {field: 'sign', title: '签名', width:100},
      {field: 'experience', title: '积分', width:100, sort: true},
      {field: 'score', title: '评分', width:100, sort: true},
      {field: 'classify', title: '职业', width:100},
      {field: 'wealth', title: '财富', width:100, sort: true}
    ]],
    data: [{
      "id": "10001",
      "username": "张三",
      "sex": "男",
      "city": "杭州",
      "sign": "人生需要动态规划",
      "experience": "116",
      "score": "33",
      "classify": "工程师",
      "wealth": "33147"
    }],
    page: true
  });
});
</script>

3.其他属性

其他常用属性包括：height（表格高度）、width（表格宽度）、even/odd（隔行换色）、align（设置对齐方式）等。例如：


<table class="layui-table" lay-even></table>

三、处理数据

1.异步加载数据

通过接口异步加载数据是table组件的常见应用。table组件提供了一个url属性，用于指定加载数据的接口地址。在接口返回数据后，可以通过done回调函数来处理数据。例如：


<table id="demo" lay-filter="test"></table>
[xss_clean]
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '/api/table.json',
      cols: [[
        {field:'id', title:'ID', width:80},
        {field:'username', title:'用户名', width:120},
        {field:'email', title:'邮箱', width:150},
        {field:'sex', title:'性别', width:80, sort: true},
        {field:'city', title:'城市', width:100},
        {field:'ip', title:'IP', width:120},
        {field:'joinTime', title:'加入时间', width:120},
        {field:'experience', title:'积分', width:80, sort: true},
        {field:'logins', title:'登录次数', width:100, sort: true},
        {field:'status', title:'状态', width:100, templet: '#statusTpl'},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      page: true
    });
  });
</script>

2.数据排序

table组件提供了排序的功能，只需要在数据列中添加sort属性即可。例如：


<table id="demo" lay-filter="test"></table>
[xss_clean]
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '/api/table.json',
      cols: [[
        {field:'id', title:'ID', width:80},
        {field:'username', title:'用户名', width:120},
        {field:'email', title:'邮箱', width:150},
        {field:'sex', title:'性别', width:80, sort: true},
        {field:'city', title:'城市', width:100},
        {field:'ip', title:'IP', width:120},
        {field:'joinTime', title:'加入时间', width:120, sort: true},
        {field:'experience', title:'积分', width:80, sort: true},
        {field:'logins', title:'登录次数', width:100, sort: true},
        {field:'status', title:'状态', width:100, templet: '#statusTpl'},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      page: true
    });
  });
</script>

四、高级用法

1.自定义表格头

table组件提供了自定义表格头的功能。可以在cols中定义laytpl模板，然后在模板中自定义thead内容。例如：


<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">查看选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">查看选中行数量</button>
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中行</button>
  </div>
</script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '/api/table.json',
      cols: [[
        {type:'checkbox'},
        {field:'id', title:'ID', width:80},
        {field:'username', title:'用户名', width:120},
        {field:'email', title:'邮箱', width:150},
        {field:'sex', title:'性别', width:80, sort: true},
        {field:'city', title:'城市', width:100},
        {field:'ip', title:'IP', width:120},
        {field:'joinTime', title:'加入时间', width:120, sort: true},
        {field:'experience', title:'积分', width:80, sort: true},
        {field:'logins', title:'登录次数', width:100, sort: true},
        {field:'status', title:'状态', width:100, templet: '#statusTpl'},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      toolbar: '#toolbarDemo',
      page: true
    });
  });
</script>

2.单元格自定义样式

table组件支持单元格自定义样式，只需要在cols中设置templet属性和方法即可。例如：


<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '/api/table.json',
      cols: [[
        {type:'checkbox'},
        {field:'id', title:'ID', width:80},
        {field:'username', title:'用户名', width:120},
        {field:'email', title:'邮箱', width:150},
        {field:'sex', title:'性别', width:80, sort: true,templet: function(d){
          if(d.sex === '男'){
            return '<span style="color: green;">'+ d.sex +'</span>'
          } else {
            return '<span style="color: red;">'+ d.sex +'</span>'
          }
        }},
        {field:'city', title:'城市', width:100},
        {field:'ip', title:'IP', width:120},
        {field:'joinTime', title:'加入时间', width:120, sort: true},
        {field:'experience', title:'积分', width:80, sort: true},
        {field:'logins', title:'登录次数', width:100, sort: true},
        {field:'status', title:'状态', width:100, templet: '#statusTpl'},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      toolbar: '#toolbarDemo',
      page: true
    });
  });
</script>

3.自定义分页样式

table组件提供了自定义分页样式的功能。只需要在page参数中设置layout属性即可。例如：


<table id="demo" lay-filter="test"></table>
<script>
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '/api/table.json',
      cols: [[
        {type:'checkbox'},
        {field:'id', title:'ID', width:80},
        {field:'username', title:'用户名', width:120},
        {field:'email', title:'邮箱', width:150},
        {field:'sex', title:'性别', width:80, sort: true},
        {field:'city', title:'城市', width:100},
        {field:'ip', title:'IP', width:120},
        {field:'joinTime', title:'加入时间', width:120, sort: true},
        {field:'experience', title:'积分', width:80, sort: true},
        {field:'logins', title:'登录次数', width:100, sort: true},
        {field:'status', title:'状态', width:100, templet: '#statusTpl'},
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
      ]],
      page: {
        count: 100,
        limit: 10,
        limits: [10, 20, 30, 40, 50],
        layout: ['prev', 'page', 'next', 'skip', 'laypage-count', 'laypage-limits']
      }
    });
  });
</script>

五、总结

本文介绍了layui table组件的基本使用、数据处理、高级用法等内容，通过阅读本文，您可以快速掌握table组件的使用方法。掌握了table组件的使用，可以快速构建响应式表格，并对表格进行多种操作，提高网站的交互性和用户体验。

layui table组件常见用法总结