在启动时隐藏引导表中的列

Posted 2021-03-27

我有下表，我使用Bootstrap-table

<div class="row mystyle" >
    <div class="col-md-12">
        <table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
               data-url="labels.json" 
               data-toggle="table"
               data-pagination="true"
               data-show-pagination-switch="true"
               data-sort-order="desc" 
               data-search="true"
               data-show-refresh="true" 
               data-show-columns="true"
               data-page-list="[10, 25, 50, 100, ALL]"                     
               >

            <thead>
                <tr>
                    <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
                    <th data-field="type" data-align="center" data-sortable="true">type</th>
                    <th data-field="description" data-align="center" data-sortable="true">description</th>
                    <th data-field="cutter" data-align="center" data-sortable="true">cutter</th> 
                    <th data-field="valid_s" data-align="center" data-sortable="true">valid</th>
                </tr>
            </thead>
        </table>
    </div>            
</div>

有没有办法定义在启动时隐藏哪些列？例如，我想只显示customer和description列。

答案

你可以使用data-visible =“false”，它很容易。

<thead>
    <tr>
        <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
        <th data-field="type" data-align="center" data-sortable="true" data-visible="false">type</th>
        <th data-field="description" data-align="center" data-sortable="true">description</th>
        <th data-field="cutter" data-align="center" data-sortable="true" data-visible="false">cutter</th>
        <th data-field="valid_s" data-align="center" data-sortable="true" data-visible="false">valid</th>
    </tr>
</thead>

另一答案

你可以在你的js中使用ready函数中的hideColumn来做到这一点：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('hideColumn', 'type');
    $table.bootstrapTable('hideColumn', 'cutter');
    $table.bootstrapTable('hideColumn', 'valid_s');
});

然后，如果你想展示它们，你可以使用：

$(function(){
    var $table = $('#mytable');

    $table.bootstrapTable('showColumn', 'type');
    $table.bootstrapTable('showColumn', 'cutter');
    $table.bootstrapTable('showColumn', 'valid_s');
});

希望这可以帮助。

另一答案

上面的答案都没有对我有用，因为他们从DOM中删除了列 - 但我必须将它保留在DOM中。我只想隐藏专栏。

以下解决方案用于保持列隐藏但在DOM中：

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

恩。在TH上使用data-class属性，然后将其定义为隐藏：

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

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

或者另一种选择是在Bootstrap-Table的onPostBody()之后在jQuery中手动隐藏TD / TH。

另一答案

您需要添加最后一行

<table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
       data-url="labels.json" 
       data-toggle="table"
       data-pagination="true"
       data-show-pagination-switch="true"
       data-sort-order="desc" 
       data-search="true"
       data-show-refresh="true" 
       data-show-columns="true"
       data-page-list="[10, 25, 50, 100, ALL]"  
       showPaginationSwitch="false"        
       >