Richfaces Spalte Filter: Wie man ein Ereignis auf die Intro-Taste auslöst

Question

を持っています。 rich:extendedDataTable und ich verwende die Spaltenfilterung. Ich möchte, dass der Filter ausgelöst wird, sobald der Benutzer die Taste "intro" eingibt, aber in Javascript gibt es kein solches Ereignis.

Ich möchte dies tun, denn wenn ich Ereignisse wie onkeyup Ich bekomme zu viele Anfragen und habe deshalb Probleme. Ich verwende 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 Funktion anzupassen. Es gibt jedoch Optionen, um sie besser nutzbar zu machen:

• <a4j:queue requestDelay="1000" ignoreDupResponce="true" /> - legen Sie dies in Ihr <a4j:form> ou <a4j:region> und Ihr onkeyup Anfragen werden verzögert und gruppiert. Siehe richfaces demo seite :

  • Die Einstellung ignoreDupResponces auf true reduziert die Anzahl der DOM-Updates bei der Eingabe. (im Ausgangszustand ist die Anzahl der Aktualisierungen gleich der Anzahl der Anfragen)
  • Die Deaktivierung der Warteschlange führt zu vollständig asynchronen Aktualisierungen. Beachten Sie, dass die Aktualisierungen nicht nur in direkter Reihenfolge erscheinen können und Sie daher eine falsche Zeichenfolge erhalten können.
  • Wenn Sie die Anforderungsverzögerung auf einen größeren Wert einstellen, verringert sich die Anzahl der Anfragen beim schnellen Tippen. (Mehr ähnliche Anfragen werden im Ergebnis zusammengefasst)

• Ich verwende derzeit die folgende Alternative:

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

  Hier müssen Sie die generierte ID für j_id70fsp . Es ist jedoch nicht garantiert, dass dies für immer so bleiben wird.

  Und das Ergebnis ist, dass die Spalte beim Drücken der Eingabetaste gefiltert wird, was recht brauchbar ist.

Answer 2

Bozho hat Recht, aber statt der Verwendung von getElementById Ich bevorzuge die Verwendung dieses Skripts:

<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, EI, Safari (der 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 bei mir.

Answer 4

Mit Richfaces 3.3.3 müssen Sie das Filterereignis beenden ( filterEvent="onblur" ) von jedem rich:column 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 verknüpfen Sie sie mit der dataTable. Es funktioniert, aber es ist undokumentiert:

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

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