当表格过长时,向右拉动滚动条,左侧3列固定不动,
向下拉动滚动条时,上方三列固定不动
,列固定不动,我会,但是向下拉动,上方固定该如何做
可以使用layui的table模块中的固定列和固定表头功能来实现表格部分固定。具体操作如下:
<script src="layui/layui.js"></script>
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即可。
另外,需要给表格设置一个高度,才能出现滚动条。