Есть ли способ добавить столбцы с данными без перерисовки всей таблицы

Question

Я использую JSF 2.0 и jQuery / javaScript, где это необходимо.

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

Например (если набрать это для иллюстрации проблемы, синтаксические ошибки могут существовать, но предположим, что их нет):

<h:dataTable id="table">
 <h:column id="cul1" rendered="#{mrBean.isCul1_rendered} >
  ...
 </h:column>

 <h:column id="cul2" rendered="#{mrBean.isCul2_rendered} >
  ...
 </h:column>
</h:dataTable>

<f:ajax render="table" />
  <h:commandButton action="#{mrBean.switchIsCul1}" >Switch Cul1</h:commandButton>
  <h:commandButton action="#{mrBean.switchIsCul2}" >Switch Cul2</h:commandButton>
</f:ajax>

Как показано, при рендеринге и отмене рендеринга столбца вся таблица перерисовывается заново. Есть ли способ визуализации только изменяющегося столбца? (Насколько я знаю, render="cul1, не будет работать)

Спасибо!

Answer 1

К сожалению, нет, это невозможно. Столбец таблицы не может быть представлен одним элементом HTML. На самом деле это коллекция свободных <td> элементов. Технически, вам нужно было бы ссылаться на каждый <td> индивидуально, чтобы иметь возможность ajax-рендеринга с помощью JSF. Поскольку вы не можете дать каждому <td> идентификатор клиента с помощью JSF, на этом все заканчивается. Вы можете назначить им общее имя класса, но атрибут JSF ajax render не работает с именами классов.

Лучше всего показать / скрыть их с помощью чистого CSS / JS. Установите display: none; для элементов <td> одного столбца, а затем используйте JS для переключения на display: block; и установите display: none; для элементов <td> другого столбца. Вы можете присвоить <td> отдельного столбца конкретное имя класса, используя атрибут columnClasses.

Пример запуска:

<h:dataTable id="table" binding="#{table}" columnClasses="col1,col2">
  <h:column>...</h:column>
  <h:column>...</h:column>
</h:dataTable>
<f:ajax>
  <h:commandButton ... onclick="switchToCol1('#{table.clientId}')" />
  <h:commandButton ... onclick="switchToCol2('#{table.clientId}')" />
</f:ajax>

(на самом деле, если не нужно вызывать действие bean-компонента, тогда достаточно простого <button>)

с этим CSS

.col1 {
    display: none;
}

и этот JS / jQuery:

function switchToCol1(tableId) {
    var $table = $("[id='" + tableId + "']");
    $('.col1', $table).show();
    $('.col2', $table).hide();
}

function switchToCol2(tableId) {
    var $table = $("[id='" + tableId + "']");
    $('.col1', $table).hide();
    $('.col2', $table).show();
}

Answer 2

Primefaces, кажется, достигают этого, хотя я не смотрел на базовый код.

Primefaces Datatable