更新 PrimeFaces 数据表标头中的输入（仅限 JavaScript）

Question

我们有一个 PrimeFaces <p:dataTable>，在表头中有一个自定义过滤器/搜索框：

<h:form id="content-form">

    ...

    <p:dataTable id="fixed-data"
                 widgetVar="resultTable"
                 value="#{resultManager.dataModel}"
                 filteredValue="#{resultManager.filteredEntities}"
                 var="result"
                 rowKey="#{result.id}"
                 selectionMode="multiple"
                 selection="#{resultManager.selectedEntities}"
                 paginator="true"
                 paginatorPosition="bottom"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="#{resultManager.selectedRowsPerPage}"
                 scrollable="true"
                 scrollHeight="200"
                 rowsPerPageTemplate="25,50,100,200"
                 resizableColumns="true"
                 emptyMessage="#{msg['common.action.search.noResultsMessage']}">

        <p:ajax event="rowSelect" ... />
        <p:ajax event="rowUnselect" ... />
        <p:ajax event="sort" ... />

        <f:facet name="header">
            <h:panelGroup id="header-facet-panel"
                          layout="block">

                <p:inputText id="filterInput"
                             widgetVar="resultTableFilterInput"
                             onkeypress="if (event.keyCode == 13) { filter(); return false; }" />
                <p:commandButton id="search-btn"
                                 icon="ui-icon bx-icon-search"
                                 ... />

            </h:panelGroup>
        </f:facet>

        <p:column ... />
        <p:column ... />
        .
        .
        .

呈现如下：

如您所见，我过滤了 James。所以只显示带有那个的行。

如果您查看左下角，还有一个树状结构，用户可以在其中单击，这样您就只能看到节点过滤条件后面的那些（然后更新右侧的数据表）。

我们现在有两种可能性：

1. 在树节点选择时调用dataTable.filter();
2. 删除<p:inputText> 值

调用dataTable.filter(); 有效，不幸的是，管理层决定重置/删除输入字段

        <p:inputText id="filterInput"
                     widgetVar="resultTableFilterInput"
                     onkeypress="if (event.keyCode == 13) { filter(); return false; }" />

没有 JSF value="..." 属性。

这是用于删除输入值的树节点的 <p:ajax>（使用 jQuery 和纯 JavaScript）：

    <p:tree id="tree"
            widgetVar="explorerTree"
            value="#{resultManagerExplorer.rootNode}"
            var="criterion"
            selectionMode="single"
            selection="#{resultManagerExplorer.selectedNode}">

        <p:ajax event="select"
                update=":content-form:fixed-data :content-form:result-sub-panel :content-form:growl"
                onstart="$( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';"
                oncomplete="resultTable.getPaginator().setPage(0); $( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';" />

但是，这对<input> 没有任何作用：

<input aria-readonly="false"
       aria-disabled="false"
       role="textbox"
       id="content-form:fixed-data:filterInput"
       name="content-form:fixed-data:filterInput"
       value="James"
       size="70"
       onkeypress="if (event.keyCode == 13) { filter(); return false; }"
       class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
       type="text">

（以上是FireFox的调试工具点击树节点后输出的HTML）

问题：

出了什么问题以及如何使其工作（无需为输入添加 JSF 值，例如 <p:inputText value="#{resultManager.filterSearchTerm}">）？

请注意，DOM ID :content-form:fixed-data 的（正确）数据表组件已更新。

Answer 1

你忘了用#开始你的jQuery选择器字符串：

$('#content-form:fixed-data:filterInput')

您可能还需要转义冒号：

$('#content-form\\:fixed-data\\:filterInput')

检查您是否确实找到了输入：

console.log($('#content-form\\:fixed-data\\:filterInput'));