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

        });

条件为true，我用一条警告消息调试了它。但是“隐藏/显示”列未运行。列始终显示。

我尝试更改代码失败，因此：

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

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

有人可以帮助我吗？

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

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

Bootstrap Table条件显示/隐藏列

1 个答案: