Bootstrap-Table:如何隐藏列而不从DOM中删除它?

时间:2018-03-12 20:47:00

标签: jquery bootstrap-table

我遇到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 Doc OnReady:

$(document).ready(function() {

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

它永远不会达到onPostBody。

4 个答案:

答案 0 :(得分:2)

最好的选择是

更改数据字段以添加类

<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/

答案 1 :(得分:1)

你几乎做对了,问题是你的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.

你也可以用CSS替换这个javascript:

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

答案 2 :(得分:0)

使该列具有width:0; overflow:hidden;这将隐藏列并仍然将其保留在DOM中。

答案 3 :(得分:0)

我解决了这个问题,将引导类d-none放在要隐藏但不从DOM中消失的列的标题和列中