Фильтр столбца Richfaces: как запускать событие по клавише вступления

У меня есть rich:extendedDataTable, и я использую фильтрацию столбцов. Я хочу, чтобы фильтр срабатывал, когда пользователь вводит клавишу «intro», но в javascript такого события нет.

Я хочу сделать это, потому что, если я использую такие события, как onkeyup, я получаю слишком много запросов, и из-за этого у меня возникают проблемы. Я использую Richfaces 3.3.0GA и Facelets.

Это компонент:

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

java javascript jsf richfaces
person pakore    schedule 17.02.2010    source источник

Ответы (5)


arrow_upward
5
arrow_downward

К сожалению, нет простого способа настроить эту функцию. Однако есть варианты сделать его более удобным:

  • <a4j:queue requestDelay="1000" ignoreDupResponce="true" /> — поместите это в <a4j:form> или <a4j:region>, и ваши onkeyup запросы будут отложены и сгруппированы. См. демонстрационную страницу Richfaces:

    • Setting ignoreDupResponces to true reduces the count of DOM updates on typing inside the input. (in initial state count of updates is equals to count of requests)
    • Отключение очереди приводит к полностью асинхронным обновлениям. Обратите внимание, что обновления могут появляться не только в прямом порядке, и в результате вы можете получить неправильную строку.
    • Установка большего значения задержки запроса уменьшает количество запросов при быстром наборе текста. (Больше похожих запросов объединяются в результат)

  • В настоящее время я использую следующую альтернативу:

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

    Где вы должны увидеть сгенерированный идентификатор для j_id70fsp. Однако не факт, что он останется таким навсегда.

    И в результате столбец фильтруется при нажатии клавиши ввода, что довольно удобно.

person Bozho    schedule 17.02.2010
comment
Мммм, пробовал, не работает. Нажимаю энтер и ничего не происходит. Если я щелкну за пределами поля ввода (размытие), оно фильтруется. Я пробовал с extendedDataTable и с dataTable. Тот же результат. - person pakore; 17.02.2010
comment
Есть ли способ отложить запрос? по-видимому, requestDelay в форме a4j: не задерживается ... Однако спасибо за ответ. - person pakore; 17.02.2010
comment
не из коробки. Но может быть какое-то обходное решение. Я подумаю об этом. - person Bozho; 17.02.2010
comment
Я пробовал это: onkeypress=if (event.keyCode == 13) {alert('hola');this.blur(); return false;} else {return true;} и это работает!... любое предложение, почему работает с предупреждением? Возможно, это связано с размытием (предполагаю, что предупреждение получает фокус) - person pakore; 17.02.2010
comment
как ни странно, он перестал работать и здесь. Так что все равно придется копаться :) - person Bozho; 17.02.2010
comment
Задержка работает идеально. Я собираюсь попробовать, как получить идентификатор элемента. Спасибо за ответ Божо. - person pakore; 17.02.2010
comment
Большое спасибо. Я использую фильтр на стороне сервера с полем ручного ввода, и этот подход сработал отлично. Позволяет пользователю нажимать кнопку ENTER, как они обычно делают. Кроме того, когда я размещал поле ввода фильтра вручную, я мог ссылаться на него по его неизменяемому идентификатору элемента. - person Lisa; 19.11.2012

arrow_upward
2
arrow_downward

Божо прав, но вместо использования getElementById я предпочитаю использовать этот скрипт:

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

Он должен работать с FF, EI, Safari (вещь targ.nodeType == 3).

person zephid    schedule 27.10.2010

arrow_upward
1
arrow_downward 

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

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

Работает на меня.

person Matthew Clement    schedule 21.06.2011

arrow_upward
1
arrow_downward

В Richfaces 3.3.3 вы должны выйти из события фильтрации (filterEvent="onblur") из каждого rich:column, и тогда вы сможете фильтровать только при нажатии клавиши ввода!

person Angel_JAVA    schedule 06.03.2012

arrow_upward
1
arrow_downward

Сохраните событие onkeyup, создайте очередь и свяжите ее с dataTable. Он работает, но недокументирован:

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

<rich:dataTable ... eventsQueue="qFilter">
...
person Israel Rios    schedule 16.07.2012