admin 管理员组

文章数量: 1087652

Bootstrap Table表头固定、列固定的实现

参考API

  • Bootstrap Table>Table Options
  • Bootstrap Table>Column Options

表格展示的两种实现方式

Bootstrap Table插件通过数据属性或JavaScript以表格格式显示数据

  • 数据属性
  • 通过JavaScript

表头固定

  • 数据属性
    使用data-height
  • JavaScript
$('#table').bootstrapTable({height: 460
})

列固定

  • JavaScript
    里面只需要关注3个属性
  1. fixedColumns 默认为false禁用冻结列，设为true启用冻结列（左侧）
  2. fixedNumber 冻结列的个数，当fixedColumns设为true有效（左侧）
  3. fixedRightNumber 冻结列的个数，当fixedColumns设为true有效（右侧）

注意：需要先引入bootstrap-table-fixed-columns插件

其他

  • 通过data-width和data-width-unit属性给列设置宽度
  • 通过data-class属性给列指定样式
  • 通过data-pagination属性设置是否显示底部工具栏
  • …

本文标签： Bootstrap Table表头固定列固定的实现

版权声明：本文标题：Bootstrap Table表头固定、列固定的实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700299677a386290.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。