PrimeNG 数据表复选框选择与分页答案

【问题标题】：PrimeNG datatable checkbox selection with paginationPrimeNG 数据表复选框选择与分页
【发布时间】：2017-01-15 23:00:01
【问题描述】：

我正在尝试引入一个带有分页的数据表布局，其中包含数据的复选框选择。我可以选择一个页面的数据，当我移动到另一个页面并选择不同的数据集时，第一页选择会丢失。

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”中）的任何想法/见解？

提前致谢。

【问题讨论】：

你有没有得到这个排序？好像还没修好……
你解决了吗。我可以在行组标题中设置复选框，但是当我单击它时，我希望选中该组的所有复选框。
我已经完成了一个拉取请求#7910，以便在分页数据中切换标题复选框时可选择保留选择。

标签： angular typescript typescript1.8 primeng

【解决方案1】：

问题在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;
      }
    }

【讨论】：