layui中table.render的使用

1. 简介

layui是一个基于jQuery的UI库，封装了大量实用的组件，方便快捷地进行页面的布局和交互。其中，table组件是常用的用于显示表格数据的组件，使用起来非常简单。

2. 使用方法

2.1 导入文件

在HTML页面中，需要先导入layui的css和js文件，代码如下：

 

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

其中，layui.js文件中包含所有的组件库，因此只需导入一次即可。

2.2 渲染表格

在HTML页面中定义一个表格的容器，例如：

 

<table class="layui-hide" id="demo" lay-filter="test"></table>

其中，class="layui-hide"是为了在页面渲染之前隐藏表格，避免出现闪烁现象。id="demo"是表格的唯一标识符，lay-filter="test"是对表格进行过滤的方式。

接着，在js代码中通过table.render方法来渲染表格，代码如下：

 

//数据源
var data=[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"22"},{"id":"3","name":"王五","age":"25"}];
//表格渲染
table.render({
    elem: '#demo',
    data: data, //数据源
    cols: [[
        {field:'id', title: 'ID', sort: true},
        {field:'name', title: '姓名'},
        {field:'age', title: '年龄', sort: true}
    ]]
}); 

其中，elem: '#demo'表示将数据源渲染到id为demo的表格中，data为数据源，cols为表头和列信息配置，sort表示是否启用排序，字段中的排序是通过js来实现的。

2.3 数据源

data可以是一个url地址，也可以是一个数组对象。如果是url地址，需要在cols中配置数据的字段名；如果是数组对象，则可以不配置。

例如：

 

//url地址
table.render({
    elem: '#demo',
    url: '/demo/table/user/', //数据接口
    cols: [[
        {field:'id', title: 'ID', sort: true},
        {field:'username', title: '用户名'},
        {field:'email', title: '邮箱'}
    ]]
}); 
//数组对象
var data=[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"22"},{"id":"3","name":"王五","age":"25"}];
table.render({
    elem: '#demo',
    data: data,
    cols: [[
        {field:'id', title: 'ID', sort: true},
        {field:'name', title: '姓名'},
        {field:'age', title: '年龄', sort: true}
    ]]
}); 

2.4 表头和列信息

表头和列信息可以由多个数组组成，每个数组对应一行表头，每个表头对应一列信息。

例如：

 

cols: [[
    {field:'id', title: 'ID', sort: true},
    {field:'username', title: '用户名'},
    {field:'email', title: '邮箱'}
], [
    {field:'phone', title: '联系电话', sort: true},
    {field:'sex', title: '性别'},
    {field:'birthday', title: '生日', sort: true}
]]

其中，每个表头的属性包括：field（数据源中对应的字段名）、title（表头名称）、sort（是否可以排序）等属性。

2.5 处理事件

在渲染过程中，可以通过回调函数来处理表格中的事件，例如排序、单元格编辑等，常用的回调函数包括：done、toolbar、cellMinWidth、parseData、minWidth等。

例如，通过done回调函数来改变表头的颜色：

 

//表格渲染
table.render({
    elem: '#demo',
    data: data, //数据源
    cols: [[
        {field:'id', title: 'ID', sort: true},
        {field:'name', title: '姓名'},
        {field:'age', title: '年龄', sort: true}
    ]],
    done: function(res, curr, count){
        //修改表头样式
        $('.layui-table thead tr th').css({'background-color':'#f2f2f2','font-weight':'bold'});
    }
}); 

3. 总结

通过以上的介绍，我们可以看到，layui中的table组件非常简单易用，只需几行代码就可以渲染表格数据。同时，它还提供了丰富的参数设置和事件回调函数，方便我们对表格进行更加精细的控制和定制。