引导表条件显示/隐藏列

Question

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

我使用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 。 结果一样。

任何人都可以帮助我吗？

Answer 1

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

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

2. 更改您的 javascript 插入此$table = $('#tableCertificato').bootstrapTable({ }); ： $table = $('#tableCertificato').bootstrapTable({ }); 并在您的 if 语句中使用它：

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

我希望这个解决方案能帮助你。