尝试在所有页面中选择复选框,但如果更改页面,所选记录将不会追加到先前所选记录。它只需要第二页记录。有没有人可以建议我如何处理选择所有页面的记录。
checkboxCheckCount(info: any): void {
var totalamount = 0;
$("#firstTable input:checked").each(function() {
if (info.index != "") {
totalamount += parseFloat(info.index);
} else {
totalamount = totalamount;
}
});
$("#idCheckBoxLabel").text(totalamount);
}
工作演示
首先,向组件添加ChangeDetectorRef
依赖项。
constructor(private http: HttpClient, private cdRef: ChangeDetectorRef) {}
然后将checked
属性添加到所有persons
。
this.persons = response.data;
this.persons.forEach(f => (f.checked = false));
然后实现CheckunCheckAll
方法:
checkuncheckall() {
const totalChecked = this.persons.filter(f => f.checked).length;
const target = totalChecked !== this.persons.length;
this.persons.forEach(f => (f.checked = target));
this.cdRef.detectChanges();
}
不再需要您的rowcallback
。
更改了checkboxcheckcount
函数,该函数将始终动态更新以获取总金额。
get checkboxCheckCount() {
const selectedPersons = this.persons.filter(f => f.checked).map(m => m.id);
const totalAmount = selectedPersons.length
? selectedPersons.reduce((sum, current) => sum + current)
: 0;
return totalAmount;
}
在HTML中:
设置计数:
<div>Count::<span>{{ checkboxCheckCount }}</span><div>
切换单个行复选框:
<td><input type="checkbox" class="checkboxCls" [value]="person.checked" [checked]="person.checked" name="id" (change)="person.checked = !person.checked"></td>
请参阅StackBlitz的工作演示。