[英]select all in datatable jsf primefaces
我試圖創建一個全選按鈕或復選框,當單擊所有 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>
你為什么不使用相同的多重選擇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>
<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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.