typescript - 如何在 Angular 数据表中实现“全选”功能,只检查当前页面的数据,而不是不同页面的数据?
1) 用户可以浏览表格并随机选择/取消选择复选框。
2) 点击表头中的“全选”复选框应该只勾选/取消勾选当前可见的所有记录。
3)“全选”按钮应在不同的数据表页面中保持其状态(已选/未选)。例如——如果用户在第1页点击全选并导航到下一页,全选复选框应取消选择,再次点击将只勾选本页的所有行,而之前选中的复选框保持不变。
我已经使用了 ng2-data-table ... 我的代码如下
<th style="width: 10%">
<!--<input type="checkbox" (change)="isSelected = !isSelected" /> Actions-->
<mfRowSelectorHead></mfRowSelectorHead>
</th>
<tbody>
<tr *ngFor="let item of mf.data;let ndx = index">
<td>
<!--<input type="checkbox" [checked]="isSelected" (change)="OnClickDeleteArray(item,check.checked)" #check />-->
<mfRowSelector [entity]="item" [checkboxId]="ndx"></mfRowSelector>
<span class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<span class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item action-dropdown" (click)="EditModel(item)">Edit</li>
<li class="dropdown-item action-dropdown" (click)="DeleteModel(item,check.checked)">Delete</li>
<li class="dropdown-item action-dropdown">View</li>
</span>
</span>
</td>
<td>{{item.AssetModelName}}</td>
<td>{{item.AssetModelManufacturerName}}</td>
<td>{{item.IsActivemodel}}</td>
</tr>
</tbody>
并且 .ts 文件中的代码如下
selectedEntities: any[];
public setSelectedEntities($event: any) {
debugger;
this.selectedEntities = $event;
}
提前感谢您抽出时间阅读