网站搜索

typescript - 如何在 Angular 数据表中实现“全选”功能,只检查当前页面的数据,而不是不同页面的数据?


1) 用户可以浏览表格并随机选择/取消选择复选框。

2) 点击表头中的“全选”复选框应该只勾选/取消勾选当前可见的所有记录。

3)“全选”按钮应在不同的数据表页面中保持其状态(已选/未选)。例如——如果用户在第1页点击全选并导航到下一页,全选复选框应取消选择,再次点击将只勾选本页的所有行,而之前选中的复选框保持不变。

我已经使用了 ng2-data-table ... 我的代码如下

<th style="width: 10%">
    <!--<input type="checkbox" (change)="isSelected = !isSelected" />&nbsp; 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;
}

提前感谢您抽出时间阅读