Bootstrap-Table：如何隐藏一个列而不从DOM中删除它？

Question

我遇到了Bootstrap-Table插件的问题：https://github.com/wenzhixin/bootstrap-table 我需要隐藏表格中的一个ID列，但是我无法实现。

<th data-field="id" data-visible="false">ID</th> 

因为这会从DOM中删除它，所以我需要保留ID在DOM中，因为它在表单提交中使用。它只需要被隐藏。

这也不起作用，我的样式丢失了，列也不存在：

<th data-field="id" style="display:none;>ID</th>

我甚至不能用jQuery手动隐藏列！换句话说，在onPostBody之后，我尝试了以下代码，但它也没有触发！

<table id="delegateTable"  data-toggle="table" data-url="delegates.action"
 data-response-handler="delegatesResponseHandler">
   <thead>
        <tr>
           <th data-field="id">ID</th>
           <th data-field="delegate" style="width:10%">Delegate</th>
   </thead>
</table>

jQuery文档中的OnReady：

$(document).ready(function() {

    // Hide column
    $('#delegateTable').bootstrapTable({
        onPostBody : function() {
            $('#delegateTable td:nth-child(0), th:nth-child(0)').hide();
            alert('column hidden');                 
        }
    });

它甚至没有到达onPostBody。

- gene b.

---

为什么您认为它已从DOM中删除？ - Breezer

我在Chrome Dev Tools（F12）中检查，发现该列根本不存在。只有N-1列存在。TD和TH都是如此。 - gene b.

可能是某些代码正在删除它，因为隐藏它只会让它不可见，而不会有其他影响，或者你的调试存在问题。 - Breezer

你熟悉 Bootstrap-Table 还是随意说话？我没有隐瞒任何东西，Bootstrap-Table 负责输出所有列。 - gene b.

伙计们...它真的从DOM中删除了它：https://jsfiddle.net/pj3rpnxu/ - Phiter

随机地一般来说...又是随机，那么库可能会将内容保存在对象或类似的东西中，要么检索所需数据，要么使用不同的函数隐藏数据。http://bootstrap-table.wenzhixin.net.cn/documentation/ - Breezer

Answer 1

最好的选择是将数据字段更改为添加类。

<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

当然要用CSS来隐藏类。

.hidden{
  display:none;
  visibility:hidden;
}

https://jsfiddle.net/yhtgfawj/7/

- Breezer

Answer 2

我解决了这个问题，将Bootstrap的d-none类放在我想要隐藏但不从DOM中消失的表头和单元格列中。

- Diego Gandino

Answer 3

你差不多做对了，问题在于你的jQuery选择器是错误的。

CSS的:nth-child并不从0开始 ;)

这样就可以：

$('#delegateTable').bootstrapTable({
    onPostBody : function() {
        $('#delegateTable').find('th:nth-child(1), tr td:nth-child(1)').hide();
        alert('column hidden');                 
    }
});

请参考这个示例。

您也可以使用CSS替换此JavaScript：

#delegateTable th:nth-child(1), #delegateTable tr td:nth-child(1){
  display: none;
}

- Phiter

---

但是你为什么要使用CSS呢？当我移除nth-child（1）的CSS时，它就停止工作了。理论上来说，我应该只需要使用.hide()而不需要CSS定义，对吧？但是仅使用hide()并不能起作用。 - gene b.

我的错，我忘记了 CSS，没有看到它是让它工作的那个。 - Phiter

我现在已经更新了我的答案，使用了正确的选择器！ - Phiter

奇怪，我的onPostBody从未触发，我也从未收到警报消息。但是我看到你的Fiddle可以工作。谢谢。我会很快确认。 - gene b.

如果您更改要隐藏的列，我不建议使用此解决方案，因为这将会导致问题，您必须相应地每次更改CSS。 - Breezer

Answer 4

使该列具有width:0; overflow:hidden;。这将隐藏该列，但仍保留其在DOM中的位置。

- Sensoray

---

不，那只是显示了该列。在这里，我更新了Phiter的JSFiddle，展示了即使对其应用样式也无效的情况：https://jsfiddle.net/pj3rpnxu/7/ （版本7）。使用您的CSS，它将输出“Stars”列。 - gene b.

@geneb。那是因为您只将其放在标题列上。它不适用于tbody内部的单元格。您还必须将其应用于这些单元格。所以：.tr td:nth-child(1), tr th:nth-child(1){ width:0; overflow:hidden;} - Sensoray

但是 Bootstrap-Table 并不能让我控制 TD，只能控制 TABLE/TH。其余的输出由插件内部处理。 - gene b.