引导表条件显示/隐藏列答案

【问题标题】：Bootstrap Table conditional show/hide columns引导表条件显示/隐藏列
【发布时间】：2018-08-29 12:23:55
【问题描述】：

我需要在我的引导表中显示/隐藏列。如果条件为真，我想显示一些列并隐藏一些其他列。我尝试了各种方法，都没有成功

我使用thymeleaf 表示我的观点。

这是我的html页面代码：

我的桌子：

    <table data-toggle="table" 
        th:data-url="@{/certificato/list/{idCommessa}(idCommessa=${commessa.id})}"
        data-pagination="true" 
        data-search="true" 
        data-classes="table table-hover" 
        data-striped="true" id="tableCertificato"
        data-side-pagination="client">
        <thead>
            <tr>
              <th data-sortable="true" data-field="numeroCertificato" th:text="#{numeroCertificato}"></th>
              <th data-sortable="true" data-field="dataCertificato" th:text="#{dataCertificato}" data-formatter="dateFormatter"></th>
              <th data-field="nFabbrica" th:text="#{nFabbrica}" ></th>
              <th data-field="modulo" th:text="#{modulo}" ></th>
              <th data-field="categoriaRischio" th:text="#{categoriaRischio}"></th>

     </thead>

我的 JS：

    $(function(){
             var tipoCertVar = [[${commessa.tipoAttivita}]];
        if(tipoCertVar == 'TPED'){
             $('#tableCertificato').bootstrapTable('hideColumn', 'nFabbrica');
             $('#tableCertificato').bootstrapTable('hideColumn', 'modulo');
             $('#tableCertificato').bootstrapTable('hideColumn', 'categoriaRischio');
         }else{
             $('#tableCertificato').bootstrapTable('showColumn', 'nFabbrica');
             $('#tableCertificato').bootstrapTable('showColumn', 'modulo');
             $('#tableCertificato').bootstrapTable('showColumn', 'categoriaRischio');

        });

条件为真，我使用警告消息对其进行了调试。但是隐藏/显示列没有运行。列始终显示。

我尝试更改我的代码但没有成功：

<th th:if="${commessa.tipoAttivita != 'TPED' }" data-field="nFabbrica" th:text="#{nFabbrica}"></th>

并使用条件data-visible。结果相同。

谁能帮帮我？

【问题讨论】：

标签： javascript thymeleaf bootstrap-table

【解决方案1】：

我遇到了类似的问题，我已经通过这一步解决了：

为表的所有条件列设置data-visible="false"；

更改你的 javascript 插入这个变量：$table = $('#tableCertificato').bootstrapTable({ }); 并在你的 if 语句中使用它：

     $table = $('#tableCertificato').bootstrapTable({ });

    if(tipoCertVar != 'TPED')   {
        $table.bootstrapTable('showColumn', 'nFabbrica');
        $table.bootstrapTable('showColumn', 'modulo');
        $table.bootstrapTable('showColumn', 'categoriaRischio');
    }

我希望这个解决方案对您有所帮助。

【讨论】：

谢谢，它为我运行！