[英]checkbox for select all checkboxes in angular primeng table
当我单击表 header 中的复选框时。 然后应该检查表中的所有复选框。 目前,我正在使用 angular 12 和 primeNG 表。
<p-table styleClass="text-sm" [value]="value" [loading]="loading" [rowHover]="true" [scrollable]="true" scrollDirection="both" class="p-element p-datatable-gridlines" (onLazyLoad)="onLazyLoad.emit($event)" [ngClass]="{'p-datatable-is-loading': loading}"
[paginator]="true" [rows]="10" [showCurrentPageReport]="true" responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,20,30]"
onPage="handlePageChange($event)">
<ng-template pTemplate="header">
<tr>
///////////////////// HERE THE CHECKBOX IN TABLE HEARDER///////////////////////////////
<th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect(value)"></p-checkbox>
</th>
<th *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none"></th>
<th style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">From</th>
<th style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">To</th>
<th style="width: 180px">Department</th>
<th pSortableColumn="created_at" style="width: 100px">Date Field<p-sortIcon field="created_at"></p-sortIcon></th>
<th style="width: 100px" class="border-left-none">Day</th>
<th style="width: 180px">Employee Name</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-leave let-rowIndex="rowIndex">
<tr [class]="{'passed-date': helper.isPassedCurrentDate(leave.leave_from)}" (dblclick)="handleDblClickRow(leave)">
///////////////////// HERE THE CHECKBOX IN TABLE DETAILS///////////////////////////////
<td *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<div *ngIf="status!='all'">
<p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="selectedLeaves" inputId="ch"></p-checkbox>
</div>
</td>
<td *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none">
<div *ngIf="state==_componentState.ALL">
<div class="{{leave.status}}-dot"></div>
</div>
</td>
<td style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">{{helper.formatDate(leave.leave_from, 'MMM D, YYYY HH:mm', false)}}</td>
<td style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">{{helper.formatDate(leave.leave_to, 'MMM D, YYYY HH:mm', false)}}</td>
<td style="width: 180px"></td>
<td style="width: 100px" class="border-left-none">{{helper.formatDate(leave.created_at, 'MM/DD')}}</td>
<td style="width: 100px">{{helper.formatDate(leave.created_at, 'ddd')}}</td>
<td style="width: 180px" class="text-capitalize">{{leave.employee_name}}</td>
</tr>
</ng-template>
我想用这个方法allSelect(value)
作为一个例子,当我点击桌面复选框时,所有的复选框都会自动被选中。 我不想使用primeNG table
选择。
https://stackblitz.com/edit/primeng-tableselection-demo你可以从这个例子中检查它
不同点到 select 所有复选框值根据 header 复选框
你的代码变成了:
在 header
<th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect()"></p-checkbox>
</th>
复选框列表
<td *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<div *ngIf="status!='all'">
<p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="group1SelectedLeaves" inputId="ch"></p-checkbox>
</div>
</td>
在 controller
group1SelectedLeaves = boolean = false;
allSelect() {
group1SelectedLeaves = this.selectedLeaves;
}
Here are steps to achieve what you wanna, if I got your question correctly.
<p-table #table [columns]="columns" [value]="dataSourceData" [lazy]="false" [showCurrentPageReport]="true"
[paginator]="true" paginatorDropdownAppendTo="body" [rows]="pageSize" [totalRecords]="totalRecords"
dataKey="Id" sortMode="single" filterDelay="0"
[rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" selectionMode="multiple"
[(selection)]="selectedDataRows" class="datatable-container">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [style.width]="col.width" />
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
<a href="#" *ngIf="col.isRowSelector" (click)="selectAll($event)">{{ col.header}}</a>
<span *ngIf="!col.isRowSelector" [pTooltip]="col.header" tooltipPosition="top">{{ col.header }}</span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" class="table-row">
<td *ngFor="let col of columns" class="text-truncate" [ngSwitch]="col.field"
[pTooltip]="col.tooltip ? col.tooltip(rowData[col.field]) : rowData[col.field]" tooltipPosition="top">
<p-tableCheckbox *ngIf="col.isRowSelector" [pSelectableRow]="rowData" [value]="rowData"></p-tableCheckbox>
<span *ngIf="!col.isRowSelector">{{ rowData[col.field] }}</span>
</td>
</tr>
</ng-template>
</p-table>
and in your code
1- define your columns
columns: Array<IColumn> = [
{ field: 'selectAll', header: 'Select All', sortable: false, width: '12%', isRowSelector: true }
];
2- Add SelectAll Method
selectAll(event: PointerEvent): void {
event.preventDefault()
this.selectedDataRows = this.dataSourceData.slice();
}
因此,当单击 select 全部按钮时,所有数据源项都将被捕获到一个新的 object“selectedDataRows”中,它作为其选择属性传递给表。
希望这对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.