bootstrap表扩展显示所有列(hideAllColumns或showAllColumns)不工作
bootstrap表扩展显示所有列(hideAllColumns或showAllColumns)不工作
提问于 2017-03-12 07:57:02
我正在遵循表格文档http://bootstrap-table.wenzhixin.net.cn/documentation/
我只想指出，当我使用这个(showAllColumns或hideAllColumns)作为带有以下代码的按钮时
$('#table').bootstrapTable('showAllColumns');这里有一个错误：“未定义的不是一个对象(计算'I')
我的目标是关闭所有列并打开选定的列。关闭单个列是可行的，但效率不高
$('#table')bootstrapTable('hideColumn', 'column1');
$('#table')bootstrapTable('hideColumn', 'column2');
. . .并显示其他列
$('#table')bootstrapTable('showColumn', 'column11');
$('#table')bootstrapTable('showColumn', 'column12');还有另一篇文章关于
$('#show_all').on('click', function(){
$('table th').show();
})但这对我不起作用。
有没有人测试一下，看看它是否正常工作？例如，我将此处的代码添加到Reset按钮，但它不起作用
$('#table').bootstrapTable('hideAllColumns');回答 1
Stack Overflow用户
发布于 2020-11-25 14:46:26
官方网站有一个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>和init表：
<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')
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42742108
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号