Bootstrap-Table技术问题：如何隐藏列但不将其从DOM中移除？

我之前也碰到过完全一样的困扰——想把ID列藏起来用于表单提交，结果要么样式乱了，要么直接把DOM搞没了！下面给你几个亲测有效的方案：

方案一：用Bootstrap-Table官方配置（最推荐） #

直接在列配置里设置visible: false，这是插件原生支持的方式，既会隐藏列，又会保留DOM元素，完美符合需求。如果怕用户通过列切换功能把ID列调出来，再加个switchable: false就行：

$('#your-table-id').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      visible: false, // 核心：隐藏列但保留DOM
      switchable: false // 可选：禁止用户切换显示该列
    },
    // 你的其他列配置
    {
      field: 'username',
      title: '用户名'
    },
    {
      field: 'email',
      title: '邮箱'
    }
  ],
  // 其他表格初始化配置...
});

方案二：用CSS强制隐藏（适合特殊场景） #

如果原生配置不生效（比如某些旧版本插件），可以给ID列加个CSS规则，通过data-field属性精准定位，强制隐藏但保留DOM：

/* 替换成你的表格ID和字段名 */
#your-table-id th[data-field="id"],
#your-table-id td[data-field="id"] {
  display: none !important;
}

或者在列配置里直接给ID列加Bootstrap的d-none类（如果项目里用了Bootstrap样式）：

columns: [
  {
    field: 'id',
    title: 'ID',
    class: 'd-none' // 用Bootstrap的隐藏类，DOM依然存在
  },
  // 其他列...
]

方案三：在渲染完成事件里手动隐藏 #

如果上面两种都不行，试试在onPostBody事件里用jQuery操作——注意要等表格完全渲染完再执行，不然选不到元素：

$('#your-table-id').bootstrapTable({
  // 其他配置...
  onPostBody: function() {
    // 定位ID列的表头和单元格，隐藏它们
    $(this).find('th[data-field="id"], td[data-field="id"]').hide();
  }
});

为什么之前的操作失败？ #

大概率是因为你在表格渲染完成前就执行了隐藏操作，或者错误地移除了DOM元素（比如用remove()而不是hide()）。Bootstrap-Table渲染时会重新生成表格DOM，所以必须等它渲染完成再操作，或者用原生配置让插件自己处理。

这样操作后，ID列的DOM元素会一直存在，表单提交时完全可以正常获取到对应的值，不会影响提交逻辑~

内容的提问来源于stack exchange，提问作者gene b.