Bootstrap表:如何隐藏列而不从DOM中删除它? [英] Bootstrap-Table: How to hide a column without deleting it from the DOM?

问题描述

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

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

我需要隐藏的表中有一个隐藏的ID列.但是我做不到

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> 

因为从DOM中删除了它.我需要将ID保留在DOM中，因为该ID用于表单提交中.只需将其隐藏即可.

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>

我什至不能使用jQuery手动隐藏列！换句话说，我在onPostBody之后尝试了以下方法，但是它也从未触发过！

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:

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.

It never even gets to that onPostBody.

推荐答案

最好的选择是

更改数据字段以添加类

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

当然还有隐藏类的css

and of course css for the hidden class

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

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

这篇关于Bootstrap表:如何隐藏列而不从DOM中删除它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！