layui怎么固定表格的表头

1. 引言

在Web开发当中，表格的运用非常广泛，但是当表格数据较多时，会出现表头和表格内容滚动时不一致的情况。为了解决这一问题，我们可以使用layui中提供的固定表头功能。

2. 准备工作

2.1 引入layui库

Layui是一款采用自身模块规范编写的前端UI框架，适合轻量级前端UI的快速开发。

使用固定表头功能需要引入layui库，可以通过CDN引入或下载到本地并引入。如果采用CDN引入，在HTML头部加入以下代码：

    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.5/css/layui.min.css" integrity="sha384-cPmQAMXW1D+7+cyLda7/FrmU22dhbzSVXwp0+xZ8MocAkBh6b1ag9Uf0zX4DqNTw" crossorigin="anonymous">
    <script src="https://cdn.staticfile.org/layui/2.5.5/layui.min.js" integrity="sha384-Wy3fkfPbCfel9cB1K2tBvJYO8/7rGPhTNSK3r9Mh1k3mm9b/bAx9O+cVHrJnIbM3" crossorigin="anonymous"></script>

2.2 创建表格

使用layui的固定表头功能，需要提前定义好表格的HTML结构。

HTML结构如下：

    <div class="layui-form">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                    <th>列4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                    <td>数据4</td>
                </tr>
            </tbody>
        </table>
    </div>

3. 实现固定表头

layui中提供了非常方便的固定表头功能，只需在table标签后添加lay-filter属性并赋值为tableFilter，然后在JavaScript中调用layui.table的render()方法即可实现固定表头。

    <script>
        layui.table.render({
            elem: 'table',
            height: 315,
            url: '/demo/table/user/',
            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:'sign', title:'签名'},
                {field:'experience', title:'积分', width:80, sort: true},
                {field:'score', title:'评分', width:80, sort: true},
                {field:'classify', title:'职业', width:100},
                {field:'wealth', title:'财富', width:135, sort: true},
            ]],
            page: true
        });
    </script>

其中，table.render()方法包含了表格的配置信息，如elem表示表格容器的ID或class，height表示表格高度，url表示数据接口地址等。这里我们需要注意的是，cols中定义了表头和列的信息，每一列表示一列，包含了field、title、width等属性。

接着，在table标签中添加lay-filter属性并赋值为tableFilter，如下所示：

    <table id="table" class="layui-table" lay-filter="tableFilter">
        ...
    </table>

最后，在JavaScript中调用layui.table.render()方法即可实现固定表头，代码如下所示：

    <script>
        //设定表格容器高度
        var element = layui.element;
        var tableHeight = document.documentElement.clientHeight - 200;
        element.render('tab', 'demo-tab'); 
        element.on('tab(demo-tab)', function(elem) {
            if(elem.index === 0) {
                tableHeight = document.documentElement.clientHeight - 200;
                layui.table.reload('table2', {
                    height: tableHeight
                });
            }
        });
        //渲染表格
        layui.table.render({
            elem: '#table',
            url: 'table-data.json',
            id: 'table2',
            cols: [[
                { field: 'id', width: 250, title: 'ID', unresize: true, sort: true },
                { field: 'name', width: 250, title: '姓名', unresize: true },
                { field: 'age', width: 250, title: '年龄', unresize: true }
            ]],
            page: true,
            height: tableHeight,
            cellMinWidth: 120, //全局定义常规单元格的最小宽度，layui 2.2.1 新增,
        });
        //固定列
        layui.table.on('tool(table_filter)', function(obj) {
            var data = obj.data;
            if(obj.event === 'detail') { //查看
                ...
            } else if(obj.event === 'edit') { //编辑
                ...
            }
        });
        layui.table.init('table', {
            //定义双击事件
            event: true,
            cols: [[ //标题栏以及数据模板
                {
                    type: 'checkbox',
                    fixed: 'left',
                    width: 50
                }, {
                    field: 'id',
                    title: 'ID号',
                    sort: true,
                    sort: true,
                    width: 60,
                    fixed: 'left'
                }, {
                    field: 'name',
                    title: '姓名',
                    sort: true,
                    edit: true
                }, {
                    field: 'phone',
                    title: '电话',
                    sort: true,
                    edit: true
                }
            ]],
            page: true,
            height: 'full-200',
            url: 'https://www.layui.com/demo/table/user/',
        });
    </script>

4. 总结

通过以上步骤，我们就可以实现固定表头的功能，让表格更加美观、实用。 layui不仅支持固定表头，还有很多强大的功能，可以满足各种需求。另外，固定表头的方式也可以采用其他方式实现，比如纯CSS等。