如何在不检查角度数据表中的当前页面数据的不同页面上实现“检查所有”功能?

时间:2017-04-28 10:59:53

标签: angular typescript angular2-template

1)用户可以在表格中导航并随机选择/取消选中复选框。

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

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;
}

提前感谢您花时间阅读

0 个答案:

没有答案