Primeface 테이블 행 선택 기준에 따라 commandButton을 동적으로 활성화/비활성화합니다.

Question

테이블 행 선택 기준으로 commandButton을 동적으로 활성화/비활성화하는 방법이 있습니까? 다음 예에서

, 내가 선택한 행이있는 경우에만 ' deleteBtn'를 사용하려면 : 당신은 당신의 버튼마다 업데이트해야합니다

Answer 1

1. <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="???" /> 
   

   감사가 선택하거나 선택 취소 이벤트 이 발생합니다.

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 당신의 Facelets의이 파일에는 fn 네임 스페이스를 추가해야합니다. 나는에서 변경 관리 빈에서

Answer 2

[SOLVED]

:

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

비트 파티에 늦게 아마도,하지만 날 여기에 체크 박스 선택 테이블에서 클릭 가능한 모든 유형에 따라 사용하거나 사용하지 않도록하는 것이 걸린 것입니다. 필자의 경우에는 아무 것도 선택되지 않은 경우 인쇄 및 삭제 버튼을 사용하지 않도록 지시해야했습니다.

<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을 사용하고 있습니다.또한 우리는 명령 단추에 대한 클라이언트 측 API를

이제

우리가 다시 올 것이다 다음 Primefaces에서

은 우리가 데이터 테이블에 대한 클라이언트 측 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> 

위와 같이 데이터 테이블 (expenseEntryTable)과 명령 버튼 (updateBtn)을위한 widgetVar 2 개를 정의했습니다.

또한 페이지로드시 유용 할 disbaled 속성 #{myexpense.disableUpdateButton}을 정의했습니다.

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

이제 자바 스크립트를 작성할 수 있습니다.

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

희망이 있다면 누구나 도움이됩니다!