Question

我正在关注表格文件 http://bootstrap-table.wenzhixin.net.cn/documentation/

我只是想注意，当我使用此代码（showAllColumns或hideAllColumns）作为具有此代码的按钮时

$('#table').bootstrapTable('showAllColumns');

这是一个错误：“undefined不是一个对象（评估'我'）

我的目标是关闭所有列并打开所选列。关闭单个列工作但效率不高

$('#table')bootstrapTable('hideColumn', 'column1');
$('#table')bootstrapTable('hideColumn', 'column2');
. . .

并显示其他列

$('#table')bootstrapTable('showColumn', 'column11');
$('#table')bootstrapTable('showColumn', 'column12');

还有其他帖子

$('#show_all').on('click', function(){
  $('table th').show();
})

但这对我不起作用。

任何人都测试一下，看看它是否正常工作？例如，我将此处的代码添加到“重置”按钮，但它不起作用

$('#table').bootstrapTable('hideAllColumns');

http://jsfiddle.net/e3nk137y/12301/

Answer 1

官方网站上有一个online editor，您可以在其中加载现成的示例。

包括您的情况：

https://live.bootstrap-table.com/example/methods/show-hide-all-columns.html

首先，添加按钮：

<div id="toolbar">
  <button id="show_all" class="btn btn-secondary">Show All Columns</button>
  <button id="hide_all" class="btn btn-secondary">Hide All Columns</button>
  <button id="hide_price" class="btn btn-secondary">Hide Price Column</button>
</div>

和初始化表：

<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-show-columns="true"
  data-pagination="true"
  data-side-pagination="server"
  data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true" data-switchable="false">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>

然后创建按钮操作：

$(function() {
  $('#show_all').click(function() {
    $('#table').bootstrapTable('showAllColumns')
  })

  $('#hide_all').click(function() {
    $('#table').bootstrapTable('hideAllColumns')
  })
  
  $('#hide_price').click(function() {
    $('#table').bootstrapTable('hideColumn', 'price')
  })
})

https://jsfiddle.net/kaperusov/1b8oruf9/5/

bootstrap表扩展显示所有列（hideAllColumns或showAllColumns）不起作用

1 个答案: