You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 12:07:05