p:ajax rowSelectCheckbox事件在列标题中不起作用复选框

时间:2014-10-13 10:50:57

标签: jsf primefaces

当我选择数据表中的复选框时,它工作正常,但是当我选中列标题复选框时,只有复选框被选中但值设置在后面。我们是否需要分别绑定列标题复选框的值。

<div class="ContentSection">
    <p:tab title="Result" 
           id="dataTable_selectionDemoTab">
        <h2>Table RowSelection with Checkbox</h2>
        <p:panel id="checkboxSelectTableContent_xhtml" >
            <div class="TableSection">
                <p:dataTable value="#{dataTableBean.defaultRecord}" 
                             var="car"
                             id="carDemo33" 
                             style="margin-bottom:0"
                             selection="#{dataTableBean.selectedRecords}"
                             rowKey="#{car.productNmr}">
                    <p:ajax event="rowSelectCheckbox" 
                            process="carDemo33" 
                            update="carDemo33,:tableform:multiCarDetail"
                            oncomplete="multiCarDialog.show();" >
                    </p:ajax>
                    <p:ajax event="rowUnselectCheckbox" 
                            oncomplete="multiCarDialog.show();" 
                            update="carDemo33,:tableform:multiCarDetail" >
                    </p:ajax>
                    <p:column selectionMode="multiple" 
                              style="width:16px;text-align:center"/>

                    <p:column headerText="productNmr" width="172">
                        <h:outputText value="#{car.productNmr}" />
                    </p:column>
                    <p:column headerText="productName" width="161">
                        <h:outputText value="#{car.productName}" />
                    </p:column>
                    <p:column headerText="address" width="161">
                        <h:outputText value="#{car.address}" />
                    </p:column>
                    <p:column headerText="leziDate" width="135">
                        <h:outputText value="#{car.leziDate}" />
                    </p:column>

                </p:dataTable>
            </div>
        </p:panel>
    </p:tab>
    </p:tabView>
</div>
<p:dialog id="tablePopup"  
          header="Selected Cars" 
          widgetVar="multiCarDialog" 
          modal="true" 
          showEffect="fade" 
          hideEffect="fade" 
          resizable="false" 
          width="200">
    <p:outputPanel id="multiCarDetail" 
                   style="text-align:center;">
        <ui:repeat value="#{dataTableBean.selectedRecords}" 
                   var="car">
            <h:outputText value="#{car.productNmr} - #{car.address}" 
                          style="display:block"/>
        </ui:repeat>
    </p:outputPanel>
</p:dialog>

2 个答案:

答案 0 :(得分:2)

你必须有p:ajax event =&#34; toggleSelect&#34;如果句柄复选框在标题中切换。

<p:ajax event="toggleSelect" 
        oncomplete="PF('multiCarDialog').show()" 
        update="checkboxDT,:formc:multiCarDetail" >
</p:ajax>

答案 1 :(得分:0)

您使用的是哪种Primefaces版本?如果使用Primefaces 5.0或更高版本,则必须将oncomplete="multiCarDialog.show();"更改为oncomplete="PF('multiCarDialog').show();"

这是我的示例代码。

XHTML

<h:form id="formc">
    <p:dataTable id="checkboxDT" 
                 var="car" 
                 value="#{dtSelectionView.cars6}" 
                 selection="#{dtSelectionView.selectedCars}" 
                 rowKey="#{car.id}" 
                 style="margin-bottom:0">

        <p:ajax event="rowSelectCheckbox" 
                process="checkboxDT" 
                update="checkboxDT,:formc:multiCarDetail"
                oncomplete="PF('multiCarDialog').show()" >
        </p:ajax>
        <p:ajax event="rowUnselectCheckbox" 
                oncomplete="PF('multiCarDialog').show()" 
                update="checkboxDT,:formc:multiCarDetail" >
        </p:ajax>
        <p:ajax event="toggleSelect" 
                oncomplete="PF('multiCarDialog').show()" 
                update="checkboxDT,:formc:multiCarDetail" >
        </p:ajax>

        <f:facet name="header">
            Checkbox
        </f:facet>
        <p:column selectionMode="multiple" 
                  style="width:2%;text-align:center"/>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="checkboxDT" 
                             update=":formc:multiCarDetail" 
                             icon="ui-icon-search" 
                             value="View" 
                             oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </p:dataTable>

    <p:dialog header="Selected Cars" 
              widgetVar="multiCarDialog" 
              modal="true" 
              showEffect="fade" 
              hideEffect="fade" 
              resizable="false" 
              width="200">
        <p:outputPanel id="multiCarDetail" 
                       style="text-align:center;">
            <ui:repeat value="#{dtSelectionView.selectedCars}" 
                       var="car">
                <h:outputText value="#{car.id} - #{car.brand}" 
                              style="display:block"/>
            </ui:repeat>
        </p:outputPanel>
    </p:dialog>
</h:form>

ManagedBean

@ManagedBean(name="dtSelectionView")
@ViewScoped
public class SelectionView implements Serializable {

    private List<Car> cars6;
    private List<Car> selectedCars;

    @ManagedProperty("#{carService}")
    private CarService service;

    @PostConstruct
    public void init() {
        cars6 = service.createCars(10);
    }

    public List<Car> getCars6() {
        return cars6;
    }

    public void setService(CarService service) {
        this.service = service;
    }

    public List<Car> getSelectedCars() {
        return selectedCars;
    }

    public void setSelectedCars(List<Car> selectedCars) {
        this.selectedCars = selectedCars;
    }
}