Bootstrap-Table: как скрыть столбец, не удаляя его из DOM?

У меня проблемы с плагином Bootstrap-Table: https://github.com/wenzhixin/bootstrap-table

У меня есть скрытый столбец идентификатора в таблице, которую мне нужно скрыть. Но я не могу

<th data-field="id" data-visible="false">ID</th>

потому что это удаляет его из DOM. Мне нужно сохранить идентификатор в DOM, так как он используется при отправке формы. Его просто нужно скрыть.

Это тоже не работает, мой стиль потерян, а столбца не существует:

<th data-field="id" style="display:none;>ID</th>

Я даже не могу использовать jQuery, чтобы скрыть столбец вручную! Другими словами, я попробовал следующее после onPostBody, и оно тоже никогда не срабатывало!

<table id="delegateTable"  data-toggle="table" data-url="delegates.action"
 data-response-handler="delegatesResponseHandler">
   <thead>
        <tr>
           <th data-field="id">ID</th>
           <th data-field="delegate" style="width:10%">Delegate</th>
   </thead>
</table>

JQuery Doc OnReady:

$(document).ready(function() {

    // Hide column
    $('#delegateTable').bootstrapTable({
        onPostBody : function() {
            $('#delegateTable td:nth-child(0), th:nth-child(0)').hide();
            alert('column hidden');                 
        }
    });

Он даже не доходит до этого onPostBody.


jquery bootstrap-table
person gene b.    schedule 12.03.2018    source источник
comment
почему вы предполагаете, что он удален из дома?   -  person Breezer    schedule 12.03.2018
comment
Я проверяю Chrome Dev Tools (F12), и столбец вообще не существует. Существуют только столбцы N-1. И ТД и ТХ   -  person gene b.    schedule 12.03.2018
comment
либо какой-то код удаляет его, потому что скрытие делает именно это и ничего больше, либо что-то не так с вашей отладкой   -  person Breezer    schedule 12.03.2018
comment
вы знакомы с Bootstrap-Table или просто говорите случайно? Я ничего не скрываю, за вывод всех моих столбцов отвечает Bootstrap-Table.   -  person gene b.    schedule 12.03.2018
comment
Ребята... это действительно удаляет его из DOM: jsfiddle.net/pj3rpnxu   -  person Phiter    schedule 12.03.2018
comment
обычно случайным образом... здесь мы снова переходим к случайному, тогда библиотека, вероятно, сохраняет содержимое внутри объекта или что-то подобное, либо извлекает нужные данные, либо использует другую функцию, чтобы скрыть данные bootstrap-table.wenzhixin.net.cn/documentation   -  person Breezer    schedule 13.03.2018

Ответы (4)


arrow_upward
7
arrow_downward

Лучшим вариантом будет

изменить поле данных, чтобы добавить класс

<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

и конечно css для скрытого класса

.hidden{
  display:none;
  visibility:hidden;
}

https://jsfiddle.net/yhtgfawj/7/

person Breezer    schedule 12.03.2018

arrow_upward
1
arrow_downward

Вы почти правильно поняли, проблема в том, что ваш селектор jQuery неверен.

Css :nth-child не начинается с 0 ;)

Это будет работать:

$('#delegateTable').bootstrapTable({
    onPostBody : function() {
        $('#delegateTable').find('th:nth-child(1), tr td:nth-child(1)').hide();
        alert('column hidden');                 
    }
});

См. этот пример.

Вы также можете заменить этот javascript на CSS:

#delegateTable th:nth-child(1), #delegateTable tr td:nth-child(1){
  display: none;
}
person Phiter    schedule 12.03.2018
comment
но зачем тебе CSS? Когда я удаляю ваш CSS для nth-child(1), он перестает работать. Теоретически я должен иметь возможность просто .hide() без определений CSS, верно? Но сам по себе метод hide() не работает. - person gene b.; 13.03.2018
comment
Моя беда, я забыл там CSS и не видел, что это тот, который заставляет его работать. - person Phiter; 13.03.2018
comment
Я обновил свой ответ, указав правильный селектор! - person Phiter; 13.03.2018
comment
Странно, мой onPostBody никогда не срабатывает, и я никогда не получаю свои предупреждающие сообщения. Но я вижу, что ваша скрипка работает. Спасибо. подтвердит в ближайшее время. - person gene b.; 13.03.2018
comment
не рекомендовал бы, чтобы это решение было проблематичным, если вы измените столбец, чтобы скрыть, вам придется каждый раз менять css соответственно - person Breezer; 13.03.2018

arrow_upward
1
arrow_downward

Я решил эту проблему, поместив класс d-none из bootstrap в заголовки и столбцы столбцов, которые я хочу скрыть, но не исчезнуть из DOM.

person Diego Gandino    schedule 20.10.2020

arrow_upward
0
arrow_downward

Сделайте этот столбец width:0; overflow:hidden;. Это скроет столбец и по-прежнему будет в DOM.

person Sensoray    schedule 12.03.2018
comment
Нет - это показывает столбец. Здесь я обновил JSFiddle от Phiter, чтобы показать, что даже установка стиля не работает: jsfiddle.net /pj3rpnxu/7 (версия 7) С помощью вашего CSS он выведет столбец «Звезды». - person gene b.; 13.03.2018
comment
@geneb. Это потому, что вы помещаете его только в столбец заголовка. Он не применяется к клеткам внутри тела. Вы должны применить его и к ним. Таким образом, 1_ - person Sensoray; 13.03.2018
comment
Но Bootstrap-Table не дает мне контроля над TD, только TABLE/TH. Остальное выводится внутри плагина. - person gene b.; 13.03.2018