javascript - PrimeNG p-table header 选择所有具有延迟加载和分页的持久性
问题描述
当前配置(无法更新到最新):
"@angular/cli": "^7.3.9",
"primeng": "7.0.5",
我有一个 PrimeNG p 表,其中包含带有分页的延迟加载数据。
PrimeNG GitHub 上也有一个未解决的问题 - https://github.com/primefaces/primeng/issues/8139
Stackblitz 链接已附加在该问题中,因此没有创建新链接。
场景:
第一页,通过复选框选择一些行。
在第 2 页上,选中标题中的“全选”复选框,并自动选中第 2 页上的所有行。
现在,当导航到第一页时,此处的选择将被重置。但标题中的 Select All 复选框仍处于选中状态。
想知道是否有人有解决此问题的方法?
任何帮助表示赞赏。
编辑: 在另一个类似的 GitHub 问题中找到的解决方案:https ://github.com/primefaces/primeng/issues/6482
解决方案: https ://github.com/primefaces/primeng/issues/6482#issuecomment-456644912
有人可以帮助在 Angular 7/8 应用程序中实现覆盖。无法理解如何获取TableHeaderCheckbox
参考并覆盖原型。
解决方案
好吧,问题的解决方案仍然没有添加到 PrimeNG 存储库中,所以即使是最新的包也没有解决它。
暂时,使用编辑下的问题中提到的解决方案
要回答我在Edit下提出的问题,请检查以下内容:
// In some service file:
import { Table, TableHeaderCheckbox } from 'primeng/table';
import { ObjectUtils } from 'primeng/components/utils/objectutils';
import { uniq, each, intersection, map, remove } from 'lodash';
@Injectable()
export class BulkSelectAllPagesService {
overridePrimeNGTableMethods() {
TableHeaderCheckbox.prototype.updateCheckedState = function () {
const currentRows = map(this.dt.value, this.dt.dataKey);
const selectedRows = map(this.dt.selection, this.dt.dataKey);
this.rowsPerPageValue = this.dt.rows;
const commonRows = intersection(currentRows, selectedRows);
return commonRows.length === currentRows.length;
};
Table.prototype.toggleRowsWithCheckbox = function (event, check) {
let _selection;
if (!check) {
_selection = this.value.slice();
each(_selection, (row) => {
const match = {}; match[this.dataKey] = row[this.dataKey];
remove(this._selection, match);
});
} else {
_selection = check ? this.filteredValue ? this.filteredValue.slice() : this.value.slice() : [];
each(this._selection, (row) => {
const match = {}; match[this.dataKey] = row[this.dataKey];
remove(_selection, match);
});
this._selection = this._selection.concat(_selection);
}
this.preventSelectionSetterPropagation = true;
this.updateSelectionKeys();
this.selectionChange.emit(this._selection);
this.tableService.onSelectionChange();
this.onHeaderCheckboxToggle.emit({
originalEvent: event,
affectedRows: _selection,
checked: check
});
};
}
// In app.component.ts
import { Component, OnInit } from '@angular/core';
import { BulkSelectAllPagesService } from 'PATH_TO_THE_FILE/bulk-select-all-pages.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(
private bulkSelectAllPagesService: BulkSelectAllPagesService) {
}
ngOnInit() {
this.bulkSelectAllPagesService.overridePrimeNGTableMethods();
}
}
providers[]
当然需要在 app.module.ts中包含服务文件
将创建一个堆栈闪电战并稍后添加。
处理行跨度分组数据的改进版本:
overridePrimeNGTableMethods() {
TableHeaderCheckbox.prototype.updateCheckedState = function () {
const currentRows = map(this.dt.value, this.dt.dataKey);
const uniqueCurrentRows = uniq(currentRows);
const selectedRows = map(this.dt.selection, this.dt.dataKey);
this.rowsPerPageValue = this.dt.rows;
const commonRows = intersection(currentRows, selectedRows);
if (currentRows.length) {
return commonRows.length === uniqueCurrentRows.length;
} else {
return false;
}
};
Table.prototype.toggleRowWithCheckbox = function (event, rowData) {
const findIndexesInSelection = (selection: any = [], data: any = {}, dataKey: any) => {
const indexes = [];
if (selection && selection.length) {
selection.forEach((sel: any, i: number) => {
if (data[dataKey] === sel[dataKey]) {
indexes.push(i);
}
});
}
return indexes;
};
this.selection = this.selection || [];
const selected = this.isSelected(rowData);
const dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rowData, this.dataKey)) : null;
this.preventSelectionSetterPropagation = true;
if (selected) {
const selectionIndexes = findIndexesInSelection(this.selection, rowData, this.dataKey);
const selectedItems = this.selection.filter((val: any) => {
return val[this.dataKey] === rowData[this.dataKey];
});
this._selection = this.selection.filter((val: any, i: number) => {
return selectionIndexes.indexOf(i) === -1;
});
this.selectionChange.emit(this.selection);
selectedItems.forEach((selectedItem: any, index: number) => {
this.onRowUnselect.emit({ originalEvent: event.originalEvent, index: event.rowIndex + index, data: selectedItem, type: 'checkbox' });
});
delete this.selectionKeys[rowData[this.dataKey]];
} else {
let rows = [rowData];
if (dataKeyValue) {
rows = this.value.filter(val => {
return (val[this.dataKey]).toString() === dataKeyValue;
});
}
this._selection = this.selection ? this.selection.concat(rows) : rows;
this.selectionChange.emit(this.selection);
this.onRowSelect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'checkbox' });
if (dataKeyValue) {
this.selectionKeys[dataKeyValue] = 1;
}
}
this.tableService.onSelectionChange();
if (this.isStateful()) {
this.saveState();
}
};
Table.prototype.toggleRowsWithCheckbox = function (event, check) {
let _selection;
if (!check) {
_selection = this.value.slice();
each(_selection, (row) => {
const match = {}; match[this.dataKey] = row[this.dataKey];
remove(this._selection, match);
});
} else {
_selection = check ? this.filteredValue ? this.filteredValue.slice() : this.value.slice() : [];
each(this._selection, (row) => {
const match = {}; match[this.dataKey] = row[this.dataKey];
remove(_selection, match);
});
this._selection = this._selection.concat(_selection);
}
this.preventSelectionSetterPropagation = true;
this.updateSelectionKeys();
this.selectionChange.emit(this._selection);
this.tableService.onSelectionChange();
this.onHeaderCheckboxToggle.emit({
originalEvent: event,
affectedRows: _selection,
checked: check
});
};
}
推荐阅读
- php - 如何在 vue js 和 laravel 中访问当前页面 id
- laravel - 在 laravel 应用程序中使用存储库模式仍然相关吗?”
- flutter - 在两个系统(Android 和 iOS)上重现视频的问题
- java - 如何使边框中的右节点占据整个右侧
- c - gnuplot 和 gtk/c 脚本输出之间的语言环境不匹配
- vue.js - 在 vue 中找不到 this.$refs.name.select() 函数
- javascript - 如何使用函数增加对象中参数的值?
- mongodb - 如何导入官方的mongodb驱动包
- sql - 在 er 图中表示动态的路线
- xamarin.android - 在片段切换期间显示加载屏幕