Question

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

Answer 1

有一个＆＃39;表Cookie＆＃39;延期。它节省了：

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

来源：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/

使用调试工具查看：

只需使用data-cookie-id-table，并确保在网站上使用多个引导表时它的值是唯一的。

Answer 3

完整示例here。

<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>

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

3 个答案: