angular – 使用分页选择PrimeNG数据表复选框
发布时间:2020-12-17 18:09:46 所属栏目:安全 来源:网络整理
导读:我正在尝试使用分页的数据表布局,其中包含数据的复选框选择.我能够选择页面的数据,当我移动到另一个页面,并选择不同的数据集时,第一页选择将丢失. demo.html: ???? p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPag
我正在尝试使用分页的数据表布局,其中包含数据的复选框选择.我能够选择页面的数据,当我移动到另一个页面,并选择不同的数据集时,第一页选择将丢失.
demo.html: <p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" sortMode="multiple" [(selection)]="selectedCars2"> <p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column> <p-column field="vin" header="Vin"></p-column> <p-column field="year" header="Year"></p-column> <p-column field="brand" header="Brand"></p-column> <p-column field="color" header="Color"> <template let-col let-car="rowData" pTemplate type="body"> <span [style.color]="car[col.field]">{{car[col.field]}}</span> </template> </p-column> <!--<p-column styleClass="col-button"> <template pTemplate type="header"> <input type="checkbox" [(ngModel)]="checkUncheckAll" /> </template> <template let-car="rowData" pTemplate type="body"> <input type="checkbox" [(ngModel)]="checkValue[car.vin]" (click)="selectCar(car,checkValue[car.vin])"/> </template> </p-column>--> </p-dataTable> <div class="table-controls-top"><div class="pager"><input type="button" class="button_tablecontrol" (click)="selectCar(selectedCars2)" value="Delete"></div></div> demo.ts: import {Component,OnInit} from '@angular/core'; import {Car} from '../domain/car'; import {CarService} from '../service/carservice'; import {Message} from '../common/api'; @Component({ templateUrl: 'app/showcase/demo/datatable/datatabledemo.html' }) export class DataTableDemo implements OnInit { cars: Car[]; cols: any[]; msgs: Message[] = []; checkValue: any; selectedCars2: any[]; constructor(private carService: CarService) { this.checkValue = {}; this.selectedCars2 = []; } ngOnInit() { this.carService.getCarsCustom().then( cars => { this.cars = cars; for (var car of this.cars) { console.log(car.vin) this.checkValue[car.vin] = false; } }); this.cols = [ {field: 'vin',header: 'Vin'},{field: 'year',header: 'Year'},{field: 'brand',header: 'Brand'},{field: 'color',header: 'Color'} ]; } selectCar(selectedCars) { console.log(selectedCars) console.log(this.selectedCars2) } } 我想团队还没有实现这个功能.有关如何使用分页保留行选择(在模型’selectedCars2’中)的任何想法/见解? 提前致谢. 解决方法
在github上讨论了这个问题:
DataTable selection with pagination 现在帮助你: HTML: <p-dataTable [value]="data" [rows]="PageSize" [paginator]="ShowPaginator" [pageLinks]="3" [(selection)]="selectedData" (onHeaderCheckboxToggle)="onTableHeaderCheckboxToggle($event)"> <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> </p-dataTable> TS: class Test { private data: MyData[]; selectedData: MyData[]; onTableHeaderCheckboxToggle(event: any) { if (event.checked === true) { for (let m of this.data) { if (/* Make your test here if the array does not contain the element*/) { this.selectedData.push(m); } } } else { this.selectedData.length = 0; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |