Bootstrap-Table: 如何在不从 DOM 中删除列的情况下隐藏它？

Question

我在使用 Bootstrap-Table 插件时遇到问题： https://github.com/wenzhixin/bootstrap-table

我在 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 文档就绪：

$(document).ready(function() {

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

它甚至从未到达那个 onPostBody。

Answer 1

使该列具有 width:0; overflow:hidden; 这将隐藏该列并使其仍然位于 DOM。

Answer 2

你几乎答对了，问题是你的 jQuery 选择器是错误的。

Css 的 :nth-child 不是从 0 开始的 ;)

这会起作用：

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

见this example.

您也可以将 javascript 替换为 CSS:

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

Answer 3

最好的选择是

更改数据字段添加class

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

当然还有 css 用于隐藏 class

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

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

Answer 4

我解决了这个问题，将 class d-none 或 bootstrap 放在我想隐藏但不会从 DOM[=10= 中消失的列的标题和单元格中]

Bootstrap-Table: 如何在不从 DOM 中删除列的情况下隐藏它？

Bootstrap-Table: How to hide a column without deleting it from the DOM?

jquery

bootstrap-table