Bootstrap Table 的移动端响应式扩展,实现表格在移动端的自适应显示。

本页目录

用法

<script src="extensions/mobile/bootstrap-table-mobile.js"></script>

示例

Mobile

选项

checkOnInit

  • 属性: data-check-on-init

  • 类型: Boolean

  • 详情:

    控制是否在初始化时检查窗口尺寸。设置为 true 时,会在初始化时检查窗口尺寸并决定使用何种视图模式。

  • 默认值: true

columnsHidden

  • 属性: data-columns-hidden

  • 类型: String

  • 详情:

    指定在卡片视图模式下需要隐藏的列字段数组。

    • data-* 属性中使用:data-columns-hidden="['name', 'description']"
    • 在 JavaScript 配置中使用:columnsHidden: ['name', 'description']
  • 默认值: undefined

minHeight

  • 属性: data-min-height

  • 类型: Integer

  • 详情:

    设置表格切换视图模式时的最小高度阈值。

  • 默认值: undefined

minWidth

  • 属性: data-min-width

  • 类型: Integer

  • 详情:

    设置表格切换视图模式时的最小宽度阈值。

  • 默认值: 562

mobileResponsive

  • 属性: data-mobile-responsive

  • 类型: Boolean

  • 详情:

    控制是否启用移动端响应式功能。设置为 true 时,表格会根据当前窗口的宽度和高度自动在卡片视图与表格视图之间切换。

  • 默认值: false