Question

我正在尝试使用分页的数据表布局，其中包含数据的复选框选择。我能够选择页面的数据，当我移动到另一个页面，并选择不同的数据集时，第一页选择将丢失。

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

提前致谢。

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

具有分页功能的PrimeNG数据表复选框选择

1 个答案: