0

我有一个可编辑的 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>

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

4

1 回答 1

2

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

unselectAllRows() - 取消选择所有行。

您可以通过为您的 DataTable 提供一个 widgetVar 来做到这一点：

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

然后从“按钮”类型的命令按钮调用它（用于客户端处理）：

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

也就是说，你为什么不直接使用框架提供的全选/取消全选选项呢？如果您删除selectionmode="multiple"列的标题方面，那么它将显示一个复选框，允许您全选或取消全选。

所以而不是

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

使用这个（我删除了align:middleCSS 属性，因为它什么都不做）：

<p:column selectionMode="multiple" style="width:2%" />
于 2013-08-02T04:10:43.947 回答