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

问题

I'm having problems with the Bootstrap-Table plugin: https://github.com/wenzhixin/bootstrap-table

I have a hidden ID column in the table I need to hide. But I can't do

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

because that deletes it from the DOM. I need to keep the ID in the DOM, since it's used in form submission. It just needs to be hidden.

This doesn't work either, my style is lost and the column doesn't exist:

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

I can't even use jQuery to hide the column manually! In other words, I tried the following after onPostBody, and it never fired either!

<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');                 
        }
    });

It never even gets to that onPostBody.

回答1:

Best option would be

to change the data field to add the class

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

and of course css for the hidden class

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

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

回答2:

You almost got it right, the problem is that your jQuery selector is wrong.

Css's :nth-child doesn't start at 0 ;)

This will work:

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

See this example.

You can also replace this javascript with CSS:

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

回答3:

Make that column have width:0; overflow:hidden; This will hide the column and still have it be in the DOM.

来源：https://stackoverflow.com/questions/49244153/bootstrap-table-how-to-hide-a-column-without-deleting-it-from-the-dom

标签

jquery

bootstrap-table