Richfaces Spalte Filter: Wie feuere ich ein Ereignis auf Intro-Taste

Question

Ich habe eine rich:extendedDataTable und ich verwende Spaltenfilterung. Ich möchte, dass der Filter ausgelöst wird, sobald der Benutzer die "Intro" -Taste eingibt, aber in Javascript gibt es kein solches Ereignis.

Ich möchte dies tun, denn wenn ich Ereignisse wie onkeyup verwende, bekomme ich zu viele Anfragen und ich habe Probleme deswegen. Ich benutze richfaces 3.3.0GA und Facelets.

Dies ist die Komponente:

<ui:composition> 
<a4j:form ajaxSingle="true" requestDelay="700"> 
    <rich:extendedDataTable id="tablePatients" value="#{user.patientsTab.patients}" var="patient" rows="20" 
     onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"> 
     <f:facet name="header"> 
      <h:outputText value="Patient List" /> 
     </f:facet> 
     <rich:column label="#{msg.id}"> 
      <f:facet name="header"> 
       <h:outputText value="Id" /> 
      </f:facet> 
      <h:outputText value="#{patient.id}" id="patientId" /> 
     </rich:column> 
     <rich:column label="#{msg.name}" sortable="true" filterBy="#{patient.profile.name}" filterEvent="onkeyup"> 
      <f:facet name="header"> 
       <h:outputText value="Name" /> 
      </f:facet> 
      <h:outputText value="#{patient.profile.name}" id="name" style="#{patient.isUnrated? 'font-weight:bold':''}" /> 
     </rich:column > 
     <rich:column label="#{msg.lastexamination}" sortable="true"> 
      <f:facet name="header"> 
       <h:outputText value="Last Examination" /> 
      </f:facet> 
      <h:outputText value="#{patient.lastExaminationDate}" style="#{patient.isUnrated? 'font-weight:bold':''}" /> 
     </rich:column> 
     <rich:column label="#{msg.action}"> 
      <f:facet name="header"> 
       <h:outputText value="#{msg.action}"></h:outputText></f:facet> 
      <a4j:commandLink id="editlink" oncomplete="#{rich:component('patientPanel')}.show()" reRender="a4jPatientPanel"> 
       <h:graphicImage value="/images/icons/PNG-24/Add.png" style="border:0" /> 
       <f:setPropertyActionListener value="#{patient}" target="#{user.patientsTab.patientPanel.patient}" /> 
      </a4j:commandLink> 
      <rich:toolTip for="editlink" value="Edit" /> 
     </rich:column> 

     <f:facet name="footer"> 
      <rich:datascroller renderIfSinglePage="false" maxPages="5" /> 
     </f:facet> 
    </rich:extendedDataTable> 

    </a4j:form> 

    <ui:include src="/pages/panels/patientPanel.xhtml" /> 
</ui:composition> 

Answer 1

Leider gibt es keine einfache Möglichkeit, diese Funktionalität anpassen. Es gibt Optionen, um es besser nutzbar zu machen, aber:

• <a4j:queue requestDelay="1000" ignoreDupResponce="true" /> - Ort dies in Ihren <a4j:form> oder <a4j:region> und Ihre onkeyup Anfragen werden verzögert und gruppiert werden. Siehe richfaces demo page:

  • Einstellung ignoreDupResponces auf true reduziert die Anzahl der DOM-Updates auf der Innenseite der Eingangs eingeben. (Im Anfangsstatus entspricht die Anzahl der Aktualisierungen der Anzahl der Anforderungen.)
  • Das Deaktivieren der Warteschlange verursacht vollständig asynchrone Aktualisierungen. Beachten Sie, dass Aktualisierungen nicht nur in der direkten Reihenfolge angezeigt werden können und Sie daher eine falsche Zeichenfolge erhalten könnten.
  • Wenn Sie die Anforderungsverzögerung auf einen höheren Wert setzen, wird die Anzahl der Anforderungen bei der Schnelleingabe verringert. (Weitere ähnliche Anträge werden im Ergebnis kombiniert)

• Ich bin derzeit die folgende Alternative verwenden:

  <rich:dataTable (..some attributes..) 
      onkeypress="if (event.keyCode == 13) {document.getElementById('formId:tableId:j_id70fsp').blur(); return false;} else {return true;}" 
      ><!-- disabling submit-on-enter --> 
      <rich:column label="#{msg.name}" sortable="true" 
       filterBy="#{patient.profile.name}" filterEvent="onblur"> 
  </rich:dataTable> 
  

  Wo haben Sie für j_id70fsp die erzeugte ID zu sehen. Es ist nicht garantiert, dass es für immer so bleiben wird.

  Und das Ergebnis ist, dass die Spalte gefiltert wird durch Drücken der Enter-Taste, die ziemlich brauchbar ist.

Answer 2

Bozho ist richtig, aber stattdessen getElementById die Verwendung ziehe ich mit diesem Skript:

<rich:extendedDataTable onkeypress=" 
if (!event) { var event = window.event; } 
if (event.keyCode == 13) { 
    var targ; 
    if (event.target) targ = event.target; 
    else if (event.srcElement) targ = event.srcElement; 
    if (targ.nodeType == 3) targ = targ.parentNode; 
    if (targ) targ.blur(); 
    return false; 
} else return true;"> 

Es sollte mit FF arbeiten, EI, Safari (die targ.nodeType == 3 Sache).

Answer 3

function filterAllOnEnter(event) 
{ 
    if(event.keyCode == 13) 
    { 
     jQuery(".rich-filter-input").blur(); 
     return false; 
    } 
    else 
    { 
     return true; 
    } 
} 

<rich:dataTable onkeydown="filterAllOnEnter(event)" ... > 

Funktioniert für mich.

Answer 4

Mit Richfaces 3.3.3 müssen Sie das Filterereignis (filterEvent="onblur") von jedem rich:column beenden und dann können Sie nur filtern, wenn die Eingabetaste gedrückt wird!

Answer 5

Behalten Sie das onkeyup-Ereignis bei, erstellen Sie eine Warteschlange und ordnen Sie sie der dataTable zu.Es funktioniert aber seine undokumentiert:

<a4j:queue name="qFilter" ignoreDupResponses="true" size="1" requestDelay="600" sizeExceededBehavior="dropNext"/> 

<rich:dataTable ... eventsQueue="qFilter"> 
...