layui制作表格,如何将表格部分固定?

图片说明
当表格过长时,向右拉动滚动条,左侧3列固定不动,
向下拉动滚动条时,上方三列固定不动
,列固定不动,我会,但是向下拉动,上方固定该如何做

可以使用layui的table模块中的固定列和固定表头功能来实现表格部分固定。具体操作如下:

  1. 引入layui的table模块:
<script src="layui/layui.js"></script>
  1. 使用table.render方法渲染表格,并设置固定列和固定表头:
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[ //表头
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width: 80},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', minWidth: 150},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'city', title: '城市', width: 100},
      {field: 'sign', title: '签名', minWidth: 200},
      {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},
      {fixed: 'right', title: '操作', toolbar: '#barDemo', width:150}
    ]],
    page: true,
    height: 315,
    limit: 5,
    limits: [5,10,15],
    done: function(res, curr, count){
      // ...
    }
  });
  
  //固定列和固定表头
  table.on('renderComplete(demo)', function(){
    var $table = $('.layui-table-view'),
        $fixed = $table.find('.layui-table-fixed');
    $table.css('width', '100%');
    $fixed.css('position', 'fixed');
    $fixed.find('.layui-table-header').css('overflow', 'visible');
    $fixed.find('.layui-table-body').css('overflow', 'auto');
    $fixed.find('.layui-table-body table').css('width', '100%');
  });
});

其中,cols为表头,使用fixed属性可以将列固定在左边或右边。在渲染完成后,可以通过table.on方法来添加renderComplete事件,在该事件中将固定列和固定表头的样式设置为fixed即可。

另外,需要给表格设置一个高度,才能出现滚动条。