单击按钮时过滤 Primefaces 数据表

Question

如何通过单击 commandLink 按钮过滤 Primefaces 数据表？

我正在尝试使用 JQuery 来实现，但它不起作用：

<p:commandLink id="filterLink" value="Click to Filter" onclick=" $('#MyFormID\\:MyDatatableID\\:MyColumnID').val('123').filter().trigger('keyup')" />

相关代码：

<h:form id="MyFormID">
    <p:panel id="MyPanelID" header="Some title">
        <p:dataTable id="MyDatatableID"
                     value="#{myController.items}"
                     rowKey="#{item.id}"
                     var="item"
                     selection="#{myController.selected}"
                     filteredValue="#{myController.filteredDemandas}"
                     widgetVar="wv">

            <p:column id="MyColumnID" sortBy="#{item.status.status}" filterBy="#{item.status.status}" filterMatchMode="in">
                <f:facet name="header">
                    <h:outputText value="MyColumnName" />
                </f:facet>
                <f:facet name="filter">
                    <p:selectCheckboxMenu label="MyColumnTitleName" onchange="PF('wv').filter()" >
                        <f:selectItems value="#{myController.listValues}" />
                    </p:selectCheckboxMenu>
                </f:facet>
                <h:outputText value="#{item.status.status}"/>
            </p:column>
          <!-- some code ommited -->
        </p:dataTable>
    </p:panel>
</h:form>

有人可以帮帮我吗？

提前致谢。

已编辑：

在对 cme​​ts 做出反应时，我收到了一些帮助，并找到了一个解决方案，可以在具有输入文本字段的列中使用，我们在其中键入一些要过滤的值：

<p:commandLink id="filterLink" value="Click to Filter" onclick=" $('#MyFormID\\:MyDatatableID\\:myColumnID\\:filter').val('123'); PF('wv').filter();" />

但在我的问题中，我使用的是 SelectCheckBoxMenu，其中有一个值列表，我对需要调用哪些元素来设置值以及如何对其进行编码感到困惑。

SelectCheckboxMenu elements - Primefaces Guide 6.2, pg. 452:

.ui-selectcheckboxmenu-items -> 选项列表容器

.ui-selectcheckboxmenu-item -> 集合中的每个选项

.ui-chkbox -> 复选框的容器。

我找到了 SelectOneMenu 的解决方案，但我不知道如何调整/实现它以适应 SelectCheckboxMenu。

• Change item of p:selectOneMenu using jQuery
• How can I set the value of a DropDownList using jQuery?
• How to get value using JQuery
• How to set a dropdown box value in jQuery

我已经尝试了以下方法，但没有成功：

<p:commandLink value="test1" onclick=" $('#MyFormID\\:MyDatatableID\\:MyColumnID_panel .ui-selectcheckboxmenu-list-item div div.ui-chkbox-box')[3].click()" />
<p:commandLink value="test2" onclick=" $('#MyFormID\\:MyDatatableID\\:selectcheckboxmenuItemsID').val('Vence hoje'); PF('wv').filter();" />
<p:commandLink value="test3" onclick=" PF('wvSelectcheckboxmenu').jq.find('.ui-selectcheckboxmenu-item:eq(3)').click(); PF('wv').filter();" />
<p:commandLink value="test4" onclick=" PF('wvSelectcheckboxmenu').jq.find('.ui-selectcheckboxmenu-items:eq(3)').click(); PF('wv').filter();" />

下面是我用 Chrome 浏览器开发工具得到的（相关的）html 代码：

<div class="ui-column-customfilter">
  <div id="MyFormID:MyDatatableID:idBoxSituacao" class="ui-selectcheckboxmenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
        <input id="MyFormID:MyDatatableID:idBoxSituacao_focus" name="MyFormID:MyDatatableID:idBoxSituacao_focus" type="text" readonly="readonly" aria-expanded="true" aria-labelledby="MyFormID:MyDatatableID:idBoxSituacao_label">
    </div>
    <div class="ui-helper-hidden">
        <input id="MyFormID:MyDatatableID:idBoxSituacao:0" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="A Vencer" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="true">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:0">
                A Vencer
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:1" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="A Vencer até 10 dias" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="false">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:1">
                A Vencer até 10 dias
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:2" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Indefinida" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="true">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:2">
                Indefinida
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:3" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Vence hoje" data-escaped="true" onchange="PF('demandasTable').filter()" aria-checked="false">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:3">
                Vence hoje
            </label>
        <input id="MyFormID:MyDatatableID:idBoxSituacao:4" name="MyFormID:MyDatatableID:idBoxSituacao" type="checkbox" value="Vencida" data-escaped="true" onchange="PF('demandasTable').filter()">
            <label for="MyFormID:MyDatatableID:idBoxSituacao:4">
                Vencida
            </label>
    </div>
    <span class="ui-selectcheckboxmenu-label-container">
        <label class="ui-selectcheckboxmenu-label ui-corner-all" id="MyFormID:MyDatatableID:idBoxSituacao_label">
            Situação
        </label>
    </span>
    <div class="ui-selectcheckboxmenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s">
        </span>
    </div>
  </div>
</div>

有人可以帮帮我吗？

Answer 1

经过这么多的坚持和研究，我终于解决了：

在列中：

<p:selectCheckboxMenu id="MyBoxID" ... />

在命令按钮中：

<p:commandButton value="click to filter" onclick=" $('#MyFormID\\:MyDatatableID\\:MyBoxID\\:1').click(); PF('wv').filter();" />

其中 '1' 是选项中与我要过滤的值相对应的列表的索引；在这种情况下，以'123'为例。