在Primefaces表格行選擇的基礎上動態啓用/禁用commandButton

Question

是否有辦法在表格行選擇的基礎上動態啓用/禁用commandButton？

在接下來的例子，我想啓用「deleteBtn」只有在有選擇的任何行：

<p:dataTable 
    var="department" value="#{departmentCtrl.departmentTable}" 
    selection="#{departmentCtrl.departmentList}"> 

    <p:column selectionMode="multiple" styleClass="w18" /> 

    <p:column headerText="#{msgs.id}" sortBy="#{department.id}"> 
     <h:outputText value="#{department.id}" /> 
    </p:column> 

    <p:column headerText="#{msgs.name}" sortBy="#{department.name}"> 
     <h:outputText value="#{department.name}" /> 
    </p:column> 
</p:dataTable> 

<p:commandButton id="deleteBtn" value="#{msgs.delete}" disabled="???" /> 

感謝

Answer 1

1. 你應該每次更新您的按鈕選擇或取消選擇事件 發生。

2. 當departmentList爲空時，應該將其禁用。

   <p:dataTable var="department" 
   
   value="#{departmentCtrl.departmentTable}" 
   
   selection="#{departmentCtrl.departmentList}"> 
   
        <p:ajax event="rowSelect" update="deleteBtn"/> 
        <p:ajax event="rowUnselect" update="deleteBtn"/> 
   
        <p:column selectionMode="multiple" styleClass="w18" /> 
   
        <p:column headerText="#{msgs.id}" sortBy="#{department.id}"> 
         <h:outputText value="#{department.id}" /> 
        </p:column> 
   
        <p:column headerText="#{msgs.name}" sortBy="#{department.name}"> 
         <h:outputText value="#{department.name}" /> 
        </p:column> 
   
   </p:dataTable> 
   
       <p:commandButton id="deleteBtn" value="#{msgs.delete}" 
        disabled="#{fn:length(departmentCtrl.departmentList) == 0}" /> 
   

BTW不要忘記添加FN命名空間到你的Facelets文件。

Answer 2

[解決]

在管理豆我從改變：

名單departmentList;

到

系[] departmentList;

那麼我可以用：

<p:ajax event="rowSelectCheckbox" listener="#{departmentCtrl.departmentSelected}" 
         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/> 
        <p:ajax event="rowUnselectCheckbox" listener="#{departmentCtrl.departmentUnselected}" 
         update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/> 

Answer 3

有點遲到了可能，但這裏是什麼了，我根據在複選框中選擇表每一個可能的類型點擊的啓用和禁用。在我的情況下，我只需要告訴Print和Delete按鈕在沒有任何選擇時禁用。

<p:ajax event="rowSelect" update=":form:printBtn,:form:deleteBtn" /> 
<p:ajax event="rowUnselect" update=":form:printBtn,:form:deleteBtn" /> 
<p:ajax event="toggleSelect" update=":form:printBtn,:form:deleteBtn" /> 
<p:ajax event="rowSelectCheckbox" update=":form:printBtn,:form:deleteBtn" /> 
<p:ajax event="rowUnselectCheckbox" update=":form:printBtn,:form:deleteBtn" /> 

這可能是你實際上並不需要所有五個事件，但我做到了。 rowSelect和rowUnselect處理不在複選框中的鼠標點擊。 toggleSelect處理選中全部/無（列標題中的一個）和rowSelectCheckbox和rowUnselectCheckbox處理行中複選框的複選框。

Answer 4

我爲時已晚，無法回覆。但它可能有助於某人。當用戶沒有選擇任何複選框時，我有相同的要求來禁用按鈕。

我正在使用Primefaces 5.1

這是我提出的解決方案。

我使用widgetVar來檢查選定的行數並啓用/禁用命令按鈕。

從Primefaces記錄我們有一個數據表客戶端API：

而且我們有命令按鈕客戶端API

現在我們會回來到實施部分

<p:dataTable var="line" varStatus="loop" 
        value="#{myexpense.lazyModel}" paginator="true" 
        rows="#{myexpense.rows}" 
        rendered="#{myexpense.userIdSearch eq null}" 
        rowIndexVar="row" 
        emptyMessage="#{tk.expense_table_empty}" 
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} 
        {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
        widgetVar="expenseEntryTable" 
        rowsPerPageTemplate="#{myexpense.rowsPerPageTemplate}" 
        id="lazyDataTable" lazy="true" 
        selection="#{myexpense.selectedExpenseEntryList}" 
        rowKey="#{line.oid}"> 
        <p:ajax event="toggleSelect" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/> 
        <p:ajax event="rowSelectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/> 
        <p:ajax event="rowUnselectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/> 
        <p:column selectionMode="multiple" width="3%" styleClass="centerAlignColumn selectAll" id="selectAll"/> 
        .... more column 
        <f:facet name="footer"> 
         <p:commandButton process="lazyDataTable" value="#{tk.expense_update_selected}" partialSubmit="true" ajax="true" widgetVar="updateBtn" disabled="#{myexpense.disableUpdateButton}" 
          actionListener="#{myexpense.updateSelected}" 
          update="lazyDataTable @form" rendered="#{myexpense.form.myOnly}" /> 
        </f:facet> 
       </p:dataTable> 

正如你所看到的，我已經定義了2個widgetVar，一個用於數據表（expenseEntryTable），另一個用於命令按鈕（updateBtn）。

另外我定義了disbaled屬性#{myexpense.disableUpdateButton}，這對頁面加載時會有幫助。

private Boolean disableUpdateButton; 
    public Boolean getDisableUpdateButton(){ 
      disableUpdateButton = !((selectedExpenseEntryList!=null) && (!selectedExpenseEntryList.isEmpty())); 
      return disableUpdateButton; 
     } 

現在你可以編寫java腳本。

function disableOrEnableCommandButton() { 
    if (PrimeFaces.widgets['expenseEntryTable']) { 
     if (PF('expenseEntryTable').getSelectedRowsCount() > 0) { 
      PF('updateBtn').enable(); 
     } else { 
      PF('updateBtn').disable(); 
     } 
    } 
} 

希望它可以幫助任何人！