觸發/激活RowEditor從一個黃素啓用單元格編輯啓用p：dataTable

Question

我有一個primefaces p:dataTable與InCell editing enabled，並希望觸發/激活RowEditor新添加的行。

XHTML

<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..."/> 

<p:dataTable id="carTable" var="car" value="#{myBean.cars}" ... editable="true"> 
     <p:column ...> 
      <p:cellEditor> 
       ... 
      </p:cellEditor> 
     </p:column> 
    ... 
     <p:column ...> 
       <p:rowEditor /> 
     </p:column> 
    ...   
</p:dataTable> 

下面的摘錄是我迄今爲止的bean的方法：

public void addNewCar() { 

    Car newCar = new Car(); 
    cars.add(newCar); 

    FacesContext facesContext = FacesContext.getCurrentInstance(); 
    UIComponent uiTable = ComponentUtils.findComponent(facesContext.getViewRoot(), "carTable"); 
    DataTable table = (DataTable) uiTable; 

    final AjaxBehavior behavior = new AjaxBehavior();  
    RowEditEvent rowEditEvent = new RowEditEvent(uiTable, behavior, table.getRowData()); 
    rowEditEvent.setPhaseId(PhaseId.UPDATE_MODEL_VALUES); 
    table.broadcast(rowEditEvent); 
} 

我不知道

1. 如果這是正確的方法
2. 的情況是，哪個對象傳遞給構造RowEditEvent(UIComponent component, Behavior behavior, Object object)作爲第三個參數

Answer 1

如果你在只有一個數據表的facelet嘗試使用此

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()}); 

這個添加到命令按鈕。這應該工作。

Answer 2

我在創建方法中使用了類RequestContext的execute（..）方法。這讓我首先計算該行的索引進入編輯模式，並動態包括它在JavaScript：

RequestContext.getCurrentInstance().execute("jQuery('span.ui-icon-pencil').eq(" + rowToEditIndex + ").each(function(){jQuery(this).click()});"); 

希望這有助於。

Answer 3

您可以添加一個獨特的styleClass到DataTable，和一個JavaScript函數的命令按鈕：

所以添加到表：

styleClass="myTable" 

而到了按鈕：

oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()" 

而你的代碼將如下所示：

<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..." oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"/> 

<p:dataTable styleClass="myTable" id="carTable" var="car" value="#{myBean.cars}" ... editable="true"> 
     <p:column ...> 
      <p:cellEditor> 
       ... 
      </p:cellEditor> 
     </p:column> 
    ... 
     <p:column ...> 
       <p:rowEditor /> 
     </p:column> 
    ...   
</p:dataTable> 

Answer 4

該解決方案旨在解決原有答案的一些缺點：

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});" 

上述語句檢索元素的所有「TR」元件，其後代（任何級別）的」的.ui-數據表數據「類。與潛在的問題是：

1. 正如@Gnappuraz提到，如果有多個號碼：DataTable的文件中，該語句將選擇最後一個表。
2. 此外，我遇到了一個問題，即使使用一個數據表，具有p：selectOneRadio組件的列也將呈現一個html表（包含「tr」元素）。在這種情況下，選擇器爲p：selectOneRadio的表格選擇最後一個「tr」，而不是p：datatable。
3. 沒有問題，但由於jQuery的implicit iteration，可以縮短聲明以排除each（）。

我最終什麼樣的主意是：

oncomplete="jQuery('#tableForm\\:table .ui-datatable-data > tr').last().find('span.ui-icon-pencil').click();" 

這個選擇說 - 獲得最後的「TR」的元素，這是一個直接孩子帶班的元素」的.ui-datatable-的數據「，它也是形式爲」tableForm「的id爲」table「的元素的後代。換句話說，您現在可以擁有多個p：datatables，並且可以包含任何可以呈現html表格的組件。

Answer 5

試試這個：

jQuery('#FormID\\:DataTableID\\:#{datatable.size()}\\:rowEditorID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()}); 

效果很好，無論有多少數據表在同一頁。

Answer 6

如果你有多個數據表，每個人都有一個ID，然後嘗試使用這些解決方案之一：

Oncomplete="jQuery('#FrmID:TabViewI:mydataTableID'.replace(/:/g,'\\:')).find('span.ui-icon-pencil').each(function(){jQuery(this).click()});" 

OR：

oncomplete="jQuery('#FrmID\\:TabViewID\\:mydataTableID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});" 

這應該很好地工作。

Answer 7

爲了解決這個問題，最好使用styleClass，因爲爲了解決這個問題需要使用javascript，你需要檢查瀏覽器中的html標籤，因爲它們似乎隨着primefaces的版本而改變。對於vesion 6.1我已經把這個在我的豆：

RequestContext requestContext = RequestContext.getCurrentInstance(); 
requestContext.execute("$('.styleEventosPlanPrestacion tbody.ui-datatable-data tr:first-child td div.ui-row-editor a.ui-row-editor-pencil').click()"); 

，並在我的.xhtml我已經把這個：

<p:dataTable ... styleClass="styleEventosPlanPrestacion">