Question

如果我单击Select all复选框，则将选择所有条目。但是，如果我有一个包含50个用户的用户列表，并且每页将其分页5个，则如果我按下复选框，则将全部选中它们，而不仅是所选页面上的条目。我该如何解决？这是我的代码的一部分。

.html

<table class="spacing-table table-responsive">
  <thead>
    <tr>
      <th>
        <label class="customcheck">
          <input type="checkbox" (change)="selectAll()">
          <span class="checkmark">Select all</span>
        </label>
      </th>
      <th id="table-header">Name</th>
      <th id="table-header">Group</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let user of usersList | paginate: { itemsPerPage: 5, currentPage: p }">
        <td>
          <label class="customcheck">
            <input type="checkbox">
            <span class="checkmark">Select all</span>
          </label>
        </td>
        <td>{{user.name}}</td>
        <td>{{user.group}}</td>
      </tr>
  </tbody>
</table>
<pagination-controls (pageChange)="p=$event" previousLabel="Previous" nextLabel="Next"></pagination-controls>

.ts

isSelected: boolean = false
selectAll() {
    this.isSelected = !this.isSelected
}

谢谢您的时间！

Answer 1

我曾经遇到过类似的问题，而实现该问题的方法是创建一组分页数据而不是使用管道进行分页，然后在控制器中编写逻辑以查找当前页面并更新该页面的选择。

使用此页面服务创建分页数据

export class TablePageService {
constructor() {
}

getPager(totalItems: number, currentPage: number = 1, pageSize: number) {
    // calculate total pages
    const totalPages = Math.ceil(totalItems / pageSize);

    const startPage = 1;
    const endPage = totalPages;

    // calculate start and end item indexes
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
    // create an array of pages to ng-repeat in the pager control
    const pages = this.range(startPage, endPage);
   // return object with all pager properties required by the view
    return {
        totalItems,
        currentPage,
        pageSize,
        totalPages,
        startPage,
        endPage,
        startIndex,
        endIndex,
        pages,
    };
}

range(lowEnd, highEnd) {
    const arr = [];
    let c = highEnd - lowEnd + 1;
    while ( c-- ) {
        arr[c] = highEnd--;
    }
    return arr;
   }
}

在控制器中，您可以定义setPage方法，其中pagedItems将为您提供当前显示的页面集

public setPage(page: number) {

this.pager = this.tablePageService.getPager(
  this.tableContentList.length,
  page,
  this.tableConfig.pageSize
);

if (page < 1 || (page > this.pager.totalPages && page !== 1)) {
  return;
}
this.pagedItems = this.tableContentList.slice(this.pager.startIndex, this.pager.endIndex + 1);
if (this.pagedItems.length < this.pager.pageSize) {
  this.substituteItems = Array.from({
    length: this.tableConfig.pageSize - this.pagedItems.length,
  });
}
}

Answer 2

我不确定您的分页扩展名是如何工作的，但是您实际可以做的是extend each userObject with an isSelected option或hold an external array for the selections。

我打算使用第二个版本：

<table class="spacing-table table-responsive">
  <thead>
    <tr>
      <th>
        <label class="customcheck">
          <input type="checkbox" (change)="selectAll(p)">
          <span class="checkmark">Select all</span>
        </label>
      </th>
      <th id="table-header">Name</th>
      <th id="table-header">Group</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let user of usersList; let i=index | paginate: { itemsPerPage: 5, currentPage: p }">
        <td>
          <label class="customcheck">
            <input type="checkbox" [checked]="isSelected[i]">
            <span class="checkmark">Select all</span>
          </label>
        </td>
        <td>{{user.name}}</td>
        <td>{{user.group}}</td>
      </tr>
  </tbody>
</table>
<pagination-controls (pageChange)="p=$event" previousLabel="Previous" nextLabel="Next"></pagination-controls>

现在，您需要像这样在控制器中手动触发选择：

isSelected: boolean[];

ngOnInit() {
    this.isSelected = [];
    for(let i=0; i<this.userList.length; i++) {
        this.isSelected.push(false);
    }
}

selectAll(page: number) {
    // deselect all because of page changes
    for(let i=0; i<this.usersList.length; i++) {
        this.isSelected[i] = false;
    }

    // select all on current page
    for(let i=5*(p-1); i<5*(p-1)+5; i++) {
        if(i <= this.usersList.length-1) {
            this.isSelected[i] = true;
        }
    }
}

也许这个答案为您提供了一些有关自己答案的提示。

检查当前页面Angular中的所有条目

2 个答案: