有没有办法在不重新渲染整个表的情况下添加列数据表答案

【问题标题】：Is there a way to add columns datatable without rerendering the entire table有没有办法在不重新渲染整个表的情况下添加列数据表
【发布时间】：2011-12-20 10:59:39
【问题描述】：

如果需要，我同时使用 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 不起作用）

谢谢！

【问题讨论】：

标签： ajax jsf-2

【解决方案1】：

很遗憾，这不可能。表格列不能由单个 HTML 元素表示。它实际上是松散的<td> 元素的集合。从技术上讲，您需要单独引用每个 <td> 以便能够使用 JSF 进行 ajax 渲染。由于您不能使用 JSF 为每个 <td> 提供一个客户端 ID，因此它在此停止。你可以给它们一个共同的类名，但是 JSF ajax render 属性不适用于类名。

最好的办法是使用纯 CSS/JS 显示/隐藏它们。在一列的<td> 元素上设置display: none;，然后使用JS 将其切换为display: block;，并在另一列的<td> 元素上设置display: none;。您可以使用 columnClasses 属性为单个列的 <td>s 赋予特定的类名。

启动示例：

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

【讨论】：

TnX。我有点希望通过此功能节省浏览器服务器带宽，但我想以这种方式是不可能的......

【解决方案2】：

primefaces 似乎实现了这一点，尽管我没有查看底层代码。

primefaces datatable

【讨论】：

重新渲染整个表格，这正是 OP 试图避免的。