layui怎么固定表格的表头

固定表头

需求：当表格数据比较多时，需要将表头固定在页面的某个位置，以方便用户查看数据。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'./json/demo1.json'
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
      ,{field:'username', width:120, title: '用户名',edit: 'text'}
      ,{field:'email', width:150, title: '邮箱',edit: 'text', templet:function(res){
        return ''+ res.email +''
      }}
      //更多字段...
      ,{fixed: 'right', width:150, title:'操作', toolbar: '#barDemo'}
    ]]
    ,page: true
    ,height: 315
    ,done:function(){
      var th_height = $(".layui-table-fixed .layui-table-header").height();
      $(".layui-table-fixed .layui-table-header").css("height", th_height);
    }
  });  
});

通过设置fixed属性可以固定表头，使用.th-height属性将表头高度设置为与表格主体高度一致。

固定左侧列

需求：当需要在表格中固定左侧的某些列时，可以通过fixed: 'left'属性实现。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'./json/demo1.json'
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
      ,{field:'username', width:120, title: '用户名',edit: 'text'}
      ,{field:'email', width:150, title: '邮箱',edit: 'text', templet:function(res){
        return ''+ res.email +''
      }}
      //更多字段...
      ,{fixed: 'right', width:150, title:'操作', toolbar: '#barDemo'}
    ]]
    ,page: true
    ,height: 315
  });  
});

设置fixed: 'left'属性可以固定左侧列。

同时固定表头和左侧列

需求：当表格数据较多时，需要同时固定表头和左侧列，以方便用户查看数据。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'./json/demo1.json'
    ,cols: [[
      {type:'checkbox', fixed: 'left'}
      ,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
      ,{field:'username', width:120, title: '用户名',edit: 'text'}
      ,{field:'email', width:150, title: '邮箱',edit: 'text', templet:function(res){
        return ''+ res.email +''
      }}
      //更多字段...
      ,{fixed: 'right', width:150, title:'操作', toolbar: '#barDemo'}
    ]]
    ,page: true
    ,height: 315
    ,done:function(){
      var th_height = $(".layui-table-fixed .layui-table-header").height();
      var td_height = $(".layui-table-fixed-l .layui-table-body tbody tr:eq(0)").height();
      $(".layui-table-fixed .layui-table-header").css("height", th_height);
      $(".layui-table-fixed-l .layui-table-body tbody tr:eq(0)").css("height", td_height);
    }
  });  
});

通过设置fixed: 'left'属性固定左侧列，同时设置fixed: 'left'属性固定表头，使用.th-height和.td-height属性将表头和左侧列高度设置为与表格主体高度一致。

对齐方式

需求：当需要将表头和数据行内的文本对齐方式设置为不同的方向时，可以使用lay-skin="line"，并在单元格中添加style属性实现。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'./json/demo1.json'
    ,cols: [[
      {type:'checkbox', fixed: 'left'}
      ,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left', align: 'center'}
      ,{field:'username', width:120, title: '用户名',edit: 'text', align: 'center', style:'color:#009688;'}
      ,{field:'email', width:150, title: '邮箱',edit: 'text', templet:function(res){
        return ''+ res.email +''
      }, style:'text-align:right;'}
      //更多字段...
      ,{fixed: 'right', width:150, title:'操作', toolbar: '#barDemo', align: 'center'}
    ]]
    ,page: true
    ,height: 315
    ,done:function(){
      var th_height = $(".layui-table-fixed .layui-table-header").height();
      var td_height = $(".layui-table-fixed-l .layui-table-body tbody tr:eq(0)").height();
      $(".layui-table-fixed .layui-table-header").css("height", th_height);
      $(".layui-table-fixed-l .layui-table-body tbody tr:eq(0)").css("height", td_height);
    }
  });  
});

通过style属性设置文本的对齐方式和颜色，通过align属性设置单元格中文本的对齐方式，其中固定左侧列时，对齐方式必须设置为居中显示。