选择数据表中的所有 jsf primefaces

Question

我试图创建一个全选按钮或复选框，当单击所有 selectbooleanCheck 框时将被选中。 有没有直接简单的方法。我开始创建选择复选框，当更改为全选时。 谢谢

 <p:dataTable value="#{illRequestModel.list}"  
                        var="illRequestRecord" width="100%" styleClass="request-table"
                        rows="10" paginator="true" id="requestGrid" 
                        currentPageReportTemplate="Viewing Page {currentPage}"
                        paginatorTemplate="{CurrentPageReport}   {PageLinks}  "
                        paginatorPosition="bottom">
                        <p:column >
                        <f:facet name="header">
                                <h:selectBooleanCheckbox id="checkbox2" title="emailUpdates2" onchange="CheckAll()" > 

                                </h:selectBooleanCheckbox>
                            </f:facet>
                            <h:selectBooleanCheckbox id="checkbox" title="emailUpdates"
                                value="#{illRequestRecord.selected}"
                                onchange="addNumber(#{illRequestRecord.localRequestId})"> 
                                <f:ajax listener="#{illRequestRecord.selectmethod}" />
                                </h:selectBooleanCheckbox>
                        </p:column>
                        <p:column id="localRequestIdCol"
                            sortBy="#{illRequestRecord.localRequestId}">
                            <f:facet name="header">
                                <h:outputText value="ID" />
                            </f:facet>
                            <h:commandLink value="#{illRequestRecord.localRequestId}"
                                action="#{requestListController.displaySingleRecord}">
                                <f:param name="selectedItemId"
                                    value="#{illRequestRecord.localRequestId}"></f:param>
                            </h:commandLink>
                        </p:column>

Answer 1

你为什么不使用相同的多重选择datatable中使用PrimeFaces DataTable中展示正如你可以看到在：

 <p:dataTable id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">

它将自动添加检查所有功能。 如果您希望外部复选框选中所有内容，您可以执行以下操作。 为您的数据widgetVar提供一个widgetVar ，我们称之为dataTableWV

 <p:dataTable widgetVar="dataTableWV" id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">  

你有一个复选框：

 <input id="checkAll" type="checkbox" />

您可以在其上注册一个点击事件，如下所示：

 <script>
      $(document).ready(function() {
          $('#checkAll').on('click', function() {
               //selects all records on the displayed page if pagination is supported.
               dataTableWV.selectAllRowsOnPage();

               //or you can select all the rows across all pages.
               dataTableWV.selectAllRows();
          });
      });
 </script>

Answer 2

<p:dataTable widgetVar="dataTableWV" id="multiCars" var="car" value="#{tableBean.mediumCarsModel}" paginator="true" rows="10" selection="#{tableBean.selectedCars}">
  <f:facet name="header">
      <p:commandButton value="select" onclick="PF('dataTableWV').selectAllRows()" />
      <p:commandButton value="unselect" onclick="PF('dataTableWV').unselectAllRows()" />
  </f:facet>
</p:dataTable>

Answer 3

Sample Code:-

**JAVA (your backing bean class)
==============================**
//Stores the checked items from data table.
private List<String> selectedIds = new ArrayList<>();

private List<String> getSomeList() {
// return list of strings to data table
  return someList;
}

public void selectAllCheckboxes(ToggleSelectEvent event) {
if (selectedIds != null)  {
    selectedIds.clear();
    if (event.isSelected()) {
        selectedIds.addAll(someList); //Add all the elements from getSomeList()
    }
 }
}

**XHTML
=====**

<p:dataTable id="data-table-id" value="#{backingBean.someList}"
selection="#{backingBean.selectedIds}" rowKey="#{id}" var="id"                   
paginator="true" rows="10" paginatorPosition="bottom"
paginatorAlwaysVisible="false" rowSelectMode="checkbox"
rowsPerPageTemplate="10,20,30,50">

<p:column selectionMode="multiple" />
<p:ajax event="toggleSelect" 
update="@this"listener="#backingBean.selectAllCheckboxes}"/>

</p:dataTable>