Custom View

Bootstrap Table 的自定义视图扩展，允许你自定义数据展示方式。

描述

该扩展允许你通过自定义视图来展示表格数据，提供了除默认表格视图外的另一种数据展示方式。

用法

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

示例

Custom View

选项

customView

• 属性: data-custom-view

• 类型: Function|Boolean

• 详情:

  设为 false 关闭该扩展。 设为 function 时可渲染自定义视图。

• 默认值: false

customViewDefaultView

• 属性: data-custom-view-default-view

• 类型: Boolean

• 详情:

  设为 true 时自定义视图将作为默认视图显示。

• 默认值: false

showCustomView

• 属性: data-show-custom-view

• 类型: Boolean

• 详情:

  设为 true 时显示自定义视图切换按钮。

• 默认值: false

图标

• customViewOn：
  • Bootstrap 3：glyphicon glyphicon-list
  • Bootstrap 4：fa fa-eye
  • Bootstrap 5：bi-eye
  • Semantic：fa fa-eye
  • Foundation：fa fa-eye
  • Bulma：fa fa-eye
  • Materialize：remove_red_eye
• customViewOff：
  • Bootstrap 3：glyphicon glyphicon-thumbnails
  • Bootstrap 4：fa fa-th
  • Bootstrap 5：bi-grid
  • Semantic：fa fa-th
  • Foundation：fa fa-th
  • Bulma：fa fa-th
  • Materialize：grid_on

方法

toggleCustomView

• 在表格视图与自定义视图之间切换。

事件

onCustomViewPreBody

• jQuery 事件: custom-view-pre-body.bs.table

• 参数: undefined

• 详情:

  自定义视图渲染之前触发。

onCustomViewPostBody

• jQuery 事件: custom-view-post-body.bs.table

• 参数: undefined

• 详情:

  自定义视图渲染之后触发。

onToggleCustomView

• 当自定义视图切换时触发。

• jQuery 事件: toggle-custom-view.bs.table

• 参数: state

• 详情:

  自定义视图切换时触发：

  • state：新的自定义视图状态（true -> 启用自定义视图，false -> 关闭自定义视图）。

本地化

formatToggleCustomViewOn

• 类型: Function

• 默认值: function () { return "Show custom view" }

formatToggleCustomViewOff

• 类型: Function

• 默认值: function () { return "Hide custom view" }