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

Posted 2023-02-26

【中文标题】Richfaces 列过滤器：如何在介绍键上触发事件

【英文标题】：Richfaces column Filter: How to fire an event on intro key

【发布时间】：2011-01-17 19:00:32

【问题描述】：

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

【参考方案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。但是，不能保证它会永远保持这种状态。

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

【讨论】：

嗯，我试过了，但它不起作用。我按回车，没有任何反应。如果我在输入字段（onblur）之外单击，它会过滤。我已经尝试过扩展数据表和数据表。结果相同。

有什么办法可以延迟请求吗？显然“a4j：form”中的“requestDelay”并没有延迟......不过感谢您的回复。

不是开箱即用的。但可能有一些解决方法。我会考虑的。

我试过这个：onkeypress="if (event.keyCode == 13) alert('hola');this.blur(); return false; else return true; “它有效！...任何建议为什么要使用警报？也许与模糊有关（我猜警报会引起关注）

奇怪的是，它在这里也停止了工作。所以无论如何我都必须深入研究它:)

【参考方案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 事物）。

【参考方案3】：

function filterAllOnEnter(event)

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


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

为我工作。

【参考方案4】：

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

【参考方案5】：

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

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

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