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>

有人可以帮助我吗？

提前致谢。

编辑：

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

<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 - ＆gt;选项列表容器

.ui-selectcheckboxmenu-item - ＆gt;集合中的每个选项

.ui-chkbox - ＆gt;容器的复选框。

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

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

<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”为例。

单击按钮时过滤Primefaces数据表

1 个答案: