Question

我有一个可编辑的primefaces数据表，其中复选框作为列之一。有任何方法可以在单击命令按钮时取消选中所有选中的复选框。我的JSF页面代码段。

<h:form id="form">

    <h:selectOneMenu id="workspaceOptions"
        value="#{tableBean.selectedItem}" class="selectMenu">
        <f:selectItem id="item1" itemLabel="Select" itemValue="#{null}" />
        <f:selectItem id="item2" itemLabel="Assignments"
            itemValue="assignment" />
        <f:selectItem id="item3" itemLabel="Preview" itemValue="2" />
        <f:selectItem id="item4" itemLabel="Print" itemValue="3" />
        <f:selectItem id="item5" itemLabel="Refresh" itemValue="4" />
        <f:selectItem id="item6" itemLabel="Clear checkmarks" itemValue="5" />
    </h:selectOneMenu>
    <h:commandButton value="GO" class="commandButton"
        action="#{tableBean.submit}" />
    <br />
    <br />
    <br />
    <p:dataTable id="multiCars" var="car"
        value="#{tableBean.mediumCarsModel}"
        selection="#{tableBean.selectedCars}" editable="true" editMode="cell">

        <f:facet name="header">  
        Checkbox Based Selection  
    </f:facet>
        <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}"
            update=":form:messages" />

        <p:column headerText="Model" style="width:25%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.model}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText id="modelInput" value="#{car.model}"
                        style="width:96%" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Year" style="width:25%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.year}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.year}" style="width:96%" label="Year" />
                </f:facet>
            </p:cellEditor>
        </p:column>
        <p:column selectionMode="multiple" style="width:2%;align:middle">
            <f:facet name="header">
                <h:outputText value="Select" />
            </f:facet>
        </p:column>

        <p:column headerText="Manufacturer" style="width:25%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.manufacturer}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.manufacturer}" style="width:96%"
                        label="Year" />
                </f:facet>
            </p:cellEditor>
        </p:column>


        <p:column headerText="Color" style="width:25%">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.color}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.color}" style="width:96%" label="Year" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <f:facet name="footer">
            <p:commandButton id="multiViewButton" value="View"
                icon="ui-icon-search" action="#{tableBean.getSelection}" />
        </f:facet>
    </p:dataTable>


</h:form>

我可以在客户端或服务器端处理此功能。

Answer 1

如果您想使用单独的按钮，则可以调用PrimeFaces文档中提供的Javascript方法。

unselectAllRows（） - 取消选择所有行。

您可以通过向DataTable提供widgetVar来实现此目的：

<p:dataTable id="multiCars" widgetVar="multiCars" ... >

然后从类型为“button”的commandButton调用它（用于客户端处理）：

<p:commandButton type="button" value="Deselect All"
    onclick="multiCars.unselectAllRows();" />

那就是说，为什么不使用框架提供的select all / deselect all选项？如果您删除selectionmode="multiple"列的标题方面，则会显示一个复选框，允许您选择或取消全选。

所以而不是

<p:column selectionMode="multiple" style="width:2%;align:middle">
    <f:facet name="header">
        <h:outputText value="Select" />
    </f:facet>
</p:column>

使用此功能（我删除了align:middle CSS属性，因为它没有执行任何操作）：

<p:column selectionMode="multiple" style="width:2%" />

要在单击命令按钮时取消选中primefaces数据表的所有复选框

1 个答案: