如何在JS初始化的Bootstrap Table中禁用特定列的切换功能
问题
Bootstrap Table已开启列切换功能,想禁用「View」列的切换权限。查文档发现HTML初始化列时可通过data-switchable属性实现,但我的表格是JS初始化的,尝试设置switchable: false却无效,误以为框架没提供JS端的对应配置。以下是我的代码:
index.php
<table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-show-export="true" data-minimum-count-columns="2" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]" data-side-pagination="server" data-response-handler="responseHandler" data-url="data1.json"> </table>
script.js
var $table = $('#table') var $remove = $('#remove') var selections = [] function viewFormatter(value, row, index) { return [ '<a class="detail-btn btn btn-warning column-toggle" href="javascript:void(0)" role="button" title="Detail">', 'Detail', '</a>' ].join('') } function initTable() { var icons = { columns: 'bi bi-layout-sidebar-inset-reverse', fullscreen: 'bi bi-arrows-fullscreen' } $table.bootstrapTable('destroy').bootstrapTable({ icons: icons, height: 550, locale: 'en-US', columns: [ { title: 'ID', field: 'id', align: 'center', valign: 'middle', sortable: true }, { title: 'Nama', field: 'nama', align: 'center', sortable: true, align: 'center' }, { title: 'E-mail', field: 'email', align: 'center', valign: 'middle', }, { title: 'Nomor Telepon', field: 'telepon', align: 'center', valign: 'middle' }, { title: 'Lokasi', field: 'lokasi', align: 'center', valign: 'middle', sortable: true }, { title: 'View', field: 'view', align: 'center', formatter: viewFormatter } ] }) $table.on('all.bs.table', function (e, name, args) { console.log(name, args) }) } $(function() { initTable() })
解决方案
Bootstrap Table支持在JS初始化列时通过switchable属性控制列的切换权限,你只需在「View」列的配置中添加switchable: false即可。修改后的「View」列配置如下:
{ title: 'View', field: 'view', align: 'center', formatter: viewFormatter, switchable: false // 添加这一行 }
添加该属性后,「View」列会从列切换的下拉菜单中移除,用户无法切换隐藏该列。如果仍无效,请检查Bootstrap Table版本,建议使用最新稳定版以确保兼容性。
内容的提问来源于stack exchange,提问作者Brandon J
相关产品推荐
相关产品推荐

