代码之家 › 专栏 › 技术社区 › jMarcel

单击按钮时筛选PrimeFaces数据表

filtering primefaces jquery

jMarcel · 技术社区 · 6 年前

单击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();" />

但在我的问题中,我使用的是selectcheckbox菜单,其中有一个值列表,我不知道需要调用哪些元素来设置值以及如何编写代码。

SelectCheckboxMenu elements - Primefaces Guide 6.2, pg. 452 :

.ui选择复选框菜单项->选项列表容器

.ui选择复选框菜单项->集合中的每个选项

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

我已经找到了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>

有人能帮我吗?

1 回复 | 直到 6 年前

jMarcel 6 年前

经过不懈的努力和研究,我终于解决了这个问题:

在列中:

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

在命令按钮中:

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

其中“1”是选项中与要筛选的值相对应的列表的索引;在这种情况下,以“123”为例。