有沒有一種方法來添加列數據表而不重新渲染整個表

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來顯示/隱藏它們。在一列的<td>元素上設置display: none;，然後使用JS將其切換到display: block;，並在另一列的<td>元素上設置display: none;。您可以使用columnClasses屬性爲單個列的<td>指定特定類名。

開球例如：

<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> 

（實際上，如果沒有豆動作需要被調用，則純<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