1)用户可以在表格中导航并随机选择/取消选中复选框。
2)点击thead中的“全选”复选框应选中/取消选中所有当前可见的记录。
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;
}
提前感谢您花时间阅读