如何使用layui中的table模块中的基础参数

1. 简介

Layui是一款采用自身模块规范编写的前端UI框架，核心模块包括：jQuery、LayUI本身以及各类拓展模块。其中Layui的table模块非常实用，本文将介绍该模块中的基础参数。

2. 基础参数

2.1 数据渲染

Layui的table模块最基本的功能是用于表格数据的渲染，通过table模块提供的render方法来实现。下面是一个简单的例子：

<div id="demo"></div>
<script>
// 数据
var data = [
  {id: 1, name: '张三', age: 20},
  {id: 2, name: '李四', age: 22},
  {id: 3, name: '王五', age: 24}
];
// table渲染
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    data: data,
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '用户名'},
      {field: 'age', title: '年龄'}
    ]]
  });
});
</script>

上面的例子中，我们先定义了一个data数组来存放表格数据，然后通过layui.use引入了table模块，最后调用了table.render方法进行数据渲染。其中，elem表示渲染的目标元素，data表示要渲染的数据，cols表示表头和对应列的数据。

2.2 数据操作

在table中，我们经常需要对表格数据进行编辑、删除等操作。Layui的table模块提供了一些列的操作和事件来实现这些功能。

2.2.1 工具条(toolbar)

工具条是一个可以在表格右侧添加按钮的功能。例如：

<table class="layui-hide" id="demo"></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    url: '/demo/table/user/', //请求路径
    toolbar: '#toolbarDemo' //工具条
    ,cols: [[
      {type: 'checkbox'},
      {field:'id', title:'ID', width:80},
      {field:'username', title:'用户名'},
      {field:'sex', title:'性别', width:80,
        sort: true},
      {field:'city', title:'城市'},
      {field:'sign', title:'签名'},
      {field:'experience', title:'积分', width:80,
        sort: true},
      {field:'score', title:'评分', width:80,
        sort: true},
      {field:'classify', title:'职业'},
      {field:'wealth', title:'财富', width:135,
        sort: true},
    ]]
  });
});
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>添加</button>
  <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i>删除</button>
</div>
</script>

上面的例子中，我们在table.render的参数中添加了一个toolbar属性，并指定了id为“toolbarDemo”的html元素。接着，我们在下面指定了一个id为“toolbarDemo”的标签为工具条。这时候可以看到页面右侧已经出现了两个按钮，分别是“添加”和“删除”。

2.2.2 事件监听(event)

Layui的table模块还提供了许多事件可以供开发者监听，通过这些事件，我们可以非常方便地实现一些操作，例如分页、排序、单元格编辑等等。

sort(tableId, filter, sort)：监听表格排序事件

row(tableId, index, obj)：监听行单击事件

rowDouble(tableId, index, obj)：监听行双击事件

checkbox(tableId, obj)：监听复选框选择事件

toolbar(tableId, obj)：监听工具条操作事件

edit(tableId, obj)：监听单元格编辑事件

例如，在表格的数据进行排序时，我们可以这样做：

<table class="layui-hide" id="demo"></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    url: '/demo/table/user/', 
    toolbar: '#toolbarDemo', 
    cols: [[
      {type: 'checkbox'},
      {field:'id', title:'ID', width:80},
      {field:'username', title:'用户名'},
      {field:'sex', title:'性别', width:80,
        sort: true},
      {field:'city', title:'城市'},
      {field:'sign', title:'签名'},
      {field:'experience', title:'积分', width:80,
        sort: true},
      {field:'score', title:'评分', width:80,
        sort: true},
      {field:'classify', title:'职业'},
      {field:'wealth', title:'财富', width:135,
        sort: true},
    ]]
    ,page: true 
  });
  // 监听表格排序事件
  table.on('sort(demo)', function(obj){
    console.log(obj.field); //输出当前排序的字段名
    console.log(obj.type); //输出排序方式：desc（降序）、asc（升序）、null（空对象，默认排序）
    console.log(this); //当前排序的 th 对象
    
    // 重新渲染表格
    table.reload('demo', {
      initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
      where: { //请求参数
        field: obj.field, //排序字段
        order: obj.type //排序方式
      }
    });
  });
});
</script>

以上代码中设置了需要进行排序的列，并在table.on方法中监听了sort事件，当用户对表格进行排序时，就会触发该事件，并重新渲染表格。

3. 结束语

通过以上的介绍，我们可以看出layui的table模块提供了非常多的功能和API，可以轻松实现表格的渲染、操作。通过自学和使用，我们可以更好地完成我们的工作。