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>，以便能够使用JSF对其进行ajax渲染。由于您无法为每个<td>提供一个带有JSF的客户端ID，因此它会在此处停止。您可以为每个人提供一个公共类名，但JSF ajax render attribtue不适用于类名。

最好的办法是用纯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

有没有办法添加数据表列而不重新渲染整个表

2 个答案: