如何在引导程序表工具栏中保存可见列状态

Question

我在表列表中使用引导表工具栏。现在，当取消选中工具栏中的任何列时，它将从表标题中隐藏该列，但现在我将如何保存此可见列状态以在刷新页面后查看？

Answer 1

有一个"表Cookie"扩展。它保存：

• 排序顺序
• 页码
• 列表中的页码
• 可见列
• 搜索文本

来源：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cookie

示例：http://bootstrap-table.wenzhixin.net.cn/extensions/

包括JS文件

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

并将这些属性添加到您的表中：

data-state-save="true",
data-state-save-id-table="whateverIdYouLike"

必须启用Cookie才能使用此扩展。

Answer 2

不确定自@Martin的帖子以来数据属性是否已经更新，但有两个字段：

data-state-save="true",
data-state-save-id-table="whateverIdYouLike"

没有被使用。根据当前示例：http://bootstrap-table.wenzhixin.net.cn/extensions/

使用调试工具查看：

如果在站点上使用多个引导表，只需使用数据cookie id表，并确保其值是唯一的。

Answer 3

这里是完整的源代码示例。

<link href="bootstrap-table.min.css" rel="stylesheet">
<script src="bootstrap-table.min.js"></script>
<script src="extensions/cookie/bootstrap-table-cookie.min.js"></script>
<table id="table" 
  data-show-columns="true"
  data-cookie="true"
  data-cookie-id-table="saveId"
  data-search="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>
<script>
  $(function() {
    $('#table').bootstrapTable()
  })
</script>

否则

<link href="bootstrap-table.min.css" rel="stylesheet">
<script src="bootstrap-table.min.js"></script>
<script src="extensions/cookie/bootstrap-table-cookie.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>
<script>
  $(function() {
    $('#table').bootstrapTable({
        showColumns   : true,
        cookie        : true,
        cookieIdTable : "saveId",
        search        : true
    })
  })
</script>