当表格过长时,向右拉动滚动条,左侧3列固定不动,
向下拉动滚动条时,上方三列固定不动
,列固定不动,我会,但是向下拉动,上方固定该如何做
layui制作表格,如何将表格部分固定?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 自在猫先生 2023-05-06 11:53关注
可以使用layui的table模块中的固定列和固定表头功能来实现表格部分固定。具体操作如下:
- 引入layui的table模块:
<script src="layui/layui.js"></script>
- 使用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即可。
另外,需要给表格设置一个高度,才能出现滚动条。
解决 无用评论 打赏 举报
悬赏问题
- ¥15 Matlab怎么求解含参的二重积分?
- ¥15 苹果手机突然连不上wifi了?
- ¥15 cgictest.cgi文件无法访问
- ¥20 删除和修改功能无法调用
- ¥15 kafka topic 所有分副本数修改
- ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
- ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?
- ¥40 串口调试助手打开串口后,keil5的代码就停止了
- ¥15 电脑最近经常蓝屏,求大家看看哪的问题
- ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档