2010-12-29 12 views
5

Ich verwende eine PrimeFaces DataTable, um Datensätze anzuzeigen (zufällig in einer Sandbox-Anwendung generiert). Ich verwende die Checkbox-Auswahlversion. Die grundlegende DataTable funktioniert perfekt, einschließlich der Schaltflächen Löschen und Abbrechen (welche Funktionalität nur im Bestätigungsdialog verfügbar ist). Ich versuche, der DataTable Funktionalität hinzuzufügen, sodass bei Auswahl eines Kontrollkästchens andere Steuerelemente auf der Seite basierend auf der Auswahl aktiviert oder deaktiviert werden.PrimeFaces DataTable - Aktivieren/Deaktivieren von Komponenten basierend auf Zeilenauswahl

Mit anderen Worten, wenn keine Zeilen ausgewählt sind (keine Kontrollkästchen aktiviert sind), sind bestimmte Schaltflächen und/oder Menüelemente deaktiviert oder nicht gerendert. Wenn Sie eine oder mehrere Zeilen auswählen, indem Sie auf das Kontrollkästchen klicken, aktivieren oder rendern Sie die Steuerelemente. Ich habe versucht, die eingebauten JavaScript-Event-Handler zu verwenden, aber ich kann das nicht funktionieren.

Im Moment zeigt meine Seite eine DataTable 5 Spalten: eine Checkbox Auswahlspalte, Vorname, Nachname, Alter. Ich habe so etwas in einer anderen Sandbox von mir gemacht, indem ich einfache boolesche Checkboxen benutzt habe und einen Boolean mit dem onclick Event aktualisiert habe. Leider scheint in dieser DataTable nichts Ähnliches zu sein - oder wenn ich nicht weiß, wie ich es implementieren soll.

Meine Index-Seite:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.prime.com.tr/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets"> 

    <body> 

     <ui:composition template="./newTemplate.xhtml"> 


      <ui:define name="content"> 
      <h:form> 

       <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" 
        selection="#{tableBean.selectedNames}"> 

       <f:facet name="header"> 
        Customer List 
       </f:facet> 


       <p:column selectionMode="multiple" /> 

       <p:column headerText="Cust ID"> 
        <h:outputText value="#{data.id}" /> 
       </p:column> 

       <p:column headerText="First Name"> 
        <h:outputText value="#{data.firstName}" /> 
       </p:column> 

       <p:column headerText="Last Name"> 
        <h:outputText value="#{data.lastName}" /> 
       </p:column> 

       <p:column headerText="Age"> 
        <h:outputText value="#{data.age}" /> 
       </p:column> 

       <f:facet name="footer">       
        <p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" /> 
       </f:facet> 

      </p:dataTable> 

      <p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg" 
         > 

       <h:outputText value="You are about to permanently delete records." /><br /><br /> 
       <h:outputText value="Are you sure you want to continue?" /><br /><br/> 

       <h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" /> 
      </p:dialog> 

     </h:form> 
      </ui:define> 

     </ui:composition> 

    </body> 
</html> 

-Code von meinem Backing Bean, die relevant sein können:

public void deleteNames() 
    { 
     for(Data person : selectedNames) 
     { 
      data.remove(person); 
     } 
    } 

    public void cancelDelete() 
    { 
     for(Data name : selectedNames) 
      selectedNames = null; 
    } 

    public void onRowSelect(SelectEvent event) 
    { 
     if(selectedNames == null || selectedNames.length < 1) 
      setDisable(true); 
     else 
      setDisable(false); 
    } 

public boolean isDisable() { 
     if(selectedNames == null || selectedNames.length < 1) 
      disable = true; 
     else 
      disable = false; 
     return disable; 
    } 

    public void setDisable(boolean disable) { 
     this.disable = disable; 
    } 
+0

Nun, die einzige Arbeit, um ich habe in der Lage zu kommen mit ist das Kontrollkästchen zu verlassen. PrimeFaces verfügt über eine "sofortige Auswahl" -Option, bei der Sie auf eine beliebige Stelle in der Datentabelle klicken, um sie auszuwählen. Wenn ich diese Option mit selectionMode = "multiple" benutze und meine commandButtons von standard JSF in PrimeFaces commandButtons ändere, kann ich sie ein- und ausschalten, wenn Zeilen ausgewählt oder nicht ausgewählt sind. Ich würde immer noch die Kontrollkästchen zur Auswahl verwenden, aber das scheint mit einer PrimeFaces-Datentabelle nicht möglich. – Sean

Antwort

1

Es gibt eine Abhilfe in der Tat, zumindest für mich arbeiten.

  • extrahieren Sie die datatable.js von primefacess
  • ändern Sie die datatable.js selectRowWithRadio, selectRowWithRadio Funktionen wie unten
     
        PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) { 
         ... 
         ... 
         //save state 
         this.writeSelections(); 
    
         // added to add instant row selection 
         this.fireRowSelectEvent(rowId); 
         // end 
        } 
    
  • JavaScript anhängen unten zu Ende Ihrer Datentabelle Komponente
     
    <p:datatable widgetVar="wv1" id='mydatatable' ....> 
    ... 
    <p:datatable/> 
    <script type="text/javascript"> 
        if(!wv1_main.cfg.onRowSelectUpdate){ 
         wv1.cfg.onRowSelectUpdate=""; 
        }else{ 
         wv1.cfg.onRowSelectUpdate+=" "; 
        } 
        wv1.cfg.onRowSelectUpdate+="UPDATE_IDS"; 
    </script> 
    
    ersetzen 'UPDATE_IDS' mit Ihren Panel-IDs getrennt durch Leerzeichen wie "panel1 panel2";
    Ersetzen ‚WV1‘ mit dem Wert der Datentabelle widgetVar Eigenschaft
  • die modifizierten js in Ihrer JSF-Seite importieren, in dem Sie sofort ajax Checkbox/radia Auswahl verwenden möchten.
     
    <h:header/> 
    ... 
    <script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/> 
    <h:header/> 
    

Sie highligh kann mit einigen ausgewählten Zeilen mehr Modifikation

+0

Danke für die Arbeit um. – Sean

1

nur für Lösung des gleichen Problems gesucht und da JSF 2/Primefaces sind in diesen Tagen recht schnell weiterentwickelt, mehr gefunden up bis heute Lösung für Grundflächen der Version 3.0 oder höher.

Wie pro folgende Antwort in PrimeFaces Forum-Thread: http://forum.primefaces.org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

man kann, indem Sie folgende Schritte clientseitige JavaScript-Handler <p:datatable> Komponente hinzufügen:

1.Füge primefaces-extension JAR dem Klassenpfad deiner Webanwendung hinzu (diese Bibliothek ist auch im zentralen Maven Repo unter demselben Namen verfügbar). Ich habe versucht, Version 0.6.3, die die spätestens zum Zeitpunkt des Schreibens war, und es funktionierte für mich

2.Add pe Namespace entsprechenden xhtml Datei:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.prime.com.tr/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:pe="http://primefaces.org/ui/extensions"> 

     ... 

</html> 

3.Add <pe:javascript> als Kind Element zu Ihrer <p:datatable> Komponente (kann zu jeder Komponente tatsächlich zugegeben werden, die ClientBehaviorHolder Schnittstelle implementiert) wie folgt aus:

<html> 
    ... 
    <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" selection="#{tableBean.selectedNames}"> 
     <pe:javascript event="rowSelect" execute="onRowSelectedHandler();"/> 
     ... 
    </p:dataTable> 
    ... 
</html> 

Und das shoul d sei es, hoffe das hilft ...

0

Sie können ajax Ereignisse fangen, die ausgelöst werden, wenn die Zeile ausgewählt ist.

In Ihrem Fall

<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" 
    var="data" value="#{tableBean.data}" paginator="true" rows="10" 
    selection="#{tableBean.selectedNames}"> 

    <p:ajax event="rowSelectCheckbox" listener="#{tableBean.handleEvent}" 
     update="buttonThatNeedsToBeRendered"/> 

    <p:column selectionMode="multiple" /> 

    ... 

</p:dataTable> 

Weitere nützliche Ereignisse, die auf den Auswahlmodus des dataTable gezündet abhängig sind:

  1. rowSelect und rowUnselect
  2. rowSelectCheckbox und rowUnselectCheckbox
  3. rowSelectRadio
  4. toggleSelect
+0

Danke für die nützlichen 'Ereignisse' –

Verwandte Themen