Colonna Richfaces Filtro: Come attivare un evento sul tasto di introduzione

Question

Ho un rich:extendedDataTable e sto usando il filtro di colonna. Voglio che il filtro venga attivato una volta che l'utente ha inserito la chiave "intro", ma in javascript non c'è alcun evento del genere.

Voglio farlo perché se uso eventi come onkeyup ottengo troppe richieste e ho problemi a causa di ciò. Sto usando le interfacce 3.3.0GA e facelets.

Questo è il componente:

<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

Purtroppo, non v'è alcun modo semplice per personalizzare questa funzionalità. Ci sono opzioni per rendere più fruibile, però:

• <a4j:queue requestDelay="1000" ignoreDupResponce="true" /> - posto questo nella vostra <a4j:form> o <a4j:region> e le vostre richieste onkeyup sarà ritardata e raggruppati. Vedi richfaces demo page:

  • Impostazione ignoreDupResponces true riduce il numero di aggiornamenti DOM sulla digitazione all'interno dell'ingresso. (nel conteggio stato iniziale degli aggiornamenti è uguale al conteggio delle richieste)
  • La disattivazione della coda provoca aggiornamenti completamente asincroni. Nota che gli aggiornamenti potrebbero apparire non solo in ordine diretto e di conseguenza potresti ottenere stringhe sbagliate.
  • L'impostazione del ritardo della richiesta su un valore superiore riduce il numero di richieste sulla digitazione veloce. (Altre richieste analoghe sono combinate nel risultato)

• Attualmente sto usando la seguente alternativa:

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

  Dove si deve vedere l'id generato per j_id70fsp. Non è garantito che rimarrà tale per sempre, però.

  E il risultato è che la colonna viene filtrata premendo il tasto Invio, che è abbastanza utilizzabile.

Answer 2

Bozho è giusto, ma invece di usare getElementById Io preferisco usare questo script:

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

Dovrebbe funzionare con FF, EI, Safari (il targ.nodeType == 3 cosa).

Answer 3

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

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

Lavori per me.

Answer 4

Con Richfaces 3.3.3, è necessario chiudere l'evento del filtro (filterEvent="onblur") da ogni rich:column e quindi sarà possibile filtrare solo quando si preme il tasto Invio!

Answer 5

Mantieni l'evento onkeyup e crea una coda e associalo al dataTable.Funziona ma non documentato:

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

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