layui表格如何把表头固定

什么是Layui表格？

Layui是一套简洁易用的界面UI库，支持按模块或全部引入，提供了丰富的组件和工具，其中包括一个表格组件。Layui表格是一款基于jQuery开发的表格插件，它简单易用、功能强大，并且支持固定表头、排序、分页、多级表头、合并单元格等众多功能。

Layui表格如何固定表头？

固定表头是指在滚动页面时，表格的表头能够保持在页面的顶部位置不动，而表格的内容可以正常滚动。这样可以使用户更加方便的查看表格内容，特别是对于数据量较大的表格。

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    data: data,
    cols: [[
      {field:'id', title: 'ID', width: 100, fixed: 'left'},
      {field:'username', title: '用户名', width: 120},
      {field:'email', title: '邮箱', width: 180},
      {field:'sex', title: '性别', width: 80, templet: '#switchTpl', unresize: true},
      {field:'city', title: '城市', width: 100},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分', sort: true, width: 80, totalRow: true},
      {field:'ip', title: 'IP', width: 120},
      {field:'logins', title: '登入次数', width: 100},
      {field:'joinTime', title: '加入时间', width: 120},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    page: true,
    limit: 10,
    limits: [10,20,30],
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'print', 'exports'],
  });
});

在上述代码中，我们使用Layui的table.render()方法渲染表格，其中cols数组中的每个子数组代表一个表头分组，而每个子数组中的元素又代表了一个表头。通过给id字段设置fixed属性，可以实现表头固定。该属性接受三个参数，分别是left、right和true。当设置为left时，表示该表头将固定在左侧，而设置为right时则表示固定在右侧。设置为true时，则表示固定在顶部位置。

Layui表格如何禁用表头滚动？

有时候我们需要禁用表头滚动，比如当表格内容过少，不需要滚动时，此时禁用表头滚动可以有效提升表格美观度。

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    data: data,
    cols: [[
      {field:'id', title: 'ID', width: 100, fixed: 'left'},
      {field:'username', title: '用户名', width: 120},
      {field:'email', title: '邮箱', width: 180},
      {field:'sex', title: '性别', width: 80, templet: '#switchTpl', unresize: true},
      {field:'city', title: '城市', width: 100},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分', sort: true, width: 80, totalRow: true},
      {field:'ip', title: 'IP', width: 120},
      {field:'logins', title: '登入次数', width: 100},
      {field:'joinTime', title: '加入时间', width: 120},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    page: true,
    limit: 10,
    limits: [10,20,30],
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'print', 'exports'],
    scroll: false
  });
});

上述代码中，我们通过设置table.render()方法的scroll属性为false来禁用表头滚动。该属性默认为true，可以通过将其设置为false来关闭表头滚动功能。

Layui表格如何嵌套固定表头？

当表格的表头过多时，可以将表头进行分组，在每个分组中设置固定表头，从而实现复杂表格的显示。下面是一个使用Layui表格同时嵌套多层表头和固定表头的代码。

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo',
    height: 500,
    cols: [[
      {type:'checkbox'},
      {type:'numbers'},
      {type:'space', title:'操作'},
      {field:'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
      {field:'orderNumber', title: '订单号', width: 150, edit: 'text'},
      {field:'goodsName', title: '商品名称', width: 300},
      {field:'goodsPrice', title: '商品价格', width: 120, sort: true, fixed: 'right', totalRow: true},
      {title: '物流信息', colspan:3, align:'center'},
      {title: '支付信息', colspan:3, align:'center'},
      {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
    ], [
      {field:'logisticsCompany', title: '物流公司', width: 150},
      {field:'logisticsNumber', title: '物流单号', width: 200},
      {field:'logisticsStatus', title: '物流状态', width: 150},
      {field:'payStatus', title: '支付状态', width: 100, templet:'#payStatus'},
      {field:'payType', title: '支付方式', width: 100, templet:'#payType'},
      {field:'createTime', title: '创建时间', width: 200},
      {field:'endTime', title: '结束时间', width: 200},
      {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
    ]],
    data: data,
    page: true,
    limit: 10,
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'print', 'exports'],
    done: function (res, curr, count) {
      var $('.layui-table-fixed-r .layui-table-cell').css('overflow', 'visible');
    }
  });
});

在上述代码中，我们设置了两个表头分组，并在每个分组中设置了固定表头。同时，还使用了Layui的totalRow属性来实现统计表格数据的功能。在渲染完成后，通过JavaScript代码来设置数据表格的样式。

总结：使用Layui表格固定表头非常简单。通过设置固定属性fixed的值为left、right或true，可以分别实现左侧、右侧或顶部固定表头。我们还可以通过设置scroll属性来关闭表头滚动功能，以及通过分组设置嵌套表头。这些功能能够帮助我们更好的呈现数据，提高用户的使用体验。