Bootstrap Table 条件 show/hide 列

Question

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

我使用 thymeleaf 表示我的观点。

这是我的 html 页面代码：

我的TABLE:

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

        });

条件成立，我用警告信息调试了它。但是 hide/show 列不是运行。始终显示列。

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

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

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

谁能帮帮我？

Answer 1

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

为 table;

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

希望此解决方案对您有所帮助。

Bootstrap Table 条件 show/hide 列

Bootstrap Table conditional show/hide columns

javascript

thymeleaf

bootstrap-table