Bootstrap Table условно показать / скрыть столбцы - PullRequest
Новая
       4

Bootstrap Table условно показать / скрыть столбцы

0 голосов
/ 29 августа 2018

Мне нужно показать / скрыть столбцы в моей таблице начальной загрузки. Если условие истинно, я хочу показать некоторые столбцы и скрыть некоторые другие. Я пробовал разные методы, но безуспешно

Я использую 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. Те же результаты.

Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 31 августа 2018

У меня была похожая проблема, и я решил этот шаг:

  1. установить data-visible="false" для всех условных столбцов вашей таблицы;

  2. измените свой javascript, вставьте эту переменную: $table = $('#tableCertificato').bootstrapTable({ }); и используйте это в своем выражении if: 

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

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

Я надеюсь, что это решение поможет вам.

...