Question

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

Answer 1

不幸的是，没有简单的方法来自定义此功能。但是有一些选项可以让它更有用：

<a4j:queue requestDelay="1000" ignoreDupResponce="true" /> - 将其放在<a4j:form>或<a4j:region>中，您的onkeyup个请求将被延迟并分组。见richfaces demo page：
- 将ignoreDupResponces设置为true可减少输入内部键入时的DOM更新次数。（初始状态更新次数等于请求次数）
- 禁用队列会导致完全异步更新。请注意，更新可能不仅按直接顺序出现，因此您可能会收到错误的字符串。
- 将请求延迟设置为更大的值可减少快速键入时的请求数。（更多类似的请求在结果中合并）

我目前正在使用以下替代方案：

<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处看到生成的ID。但不能保证它会永远保持下去。

结果是按下回车键过滤了列，这是相当有用的。

Answer 2

Bozho是对的，但我不喜欢使用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事物）。

Answer 3

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

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

适合我。

Answer 4

使用Richfaces 3.3.3，您必须从每个filterEvent="onblur"退出过滤器事件（rich:column），然后只有在按下回车键时才能过滤！

Answer 5

保留onkeyup事件并创建一个队列并将其与dataTable相关联。它有效，但没有记录：

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

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

Richfaces列过滤器：如何在介绍键上触发事件

5 个答案: