Заголовок p-таблицы PrimeNG выбирает всю сохранность с ленивой загрузкой и разбиением на страницы - PullRequest
0 голосов
/ 04 ноября 2019

Текущая конфигурация (не может обновить ее до последней):"@angular/cli": "^7.3.9", "primeng": "7.0.5",

У меня есть p-таблица PrimeNG, в которую загружаются ленивые данные с нумерацией страниц. Для PrimeNG GitHub также существует проблема, связанная с этим - https://github.com/primefaces/primeng/issues/8139
Ссылка Stackblitz уже присоединена к этой проблеме, поэтому не создайте новую.

Сценарий:Одна первая страница, некоторые строки выбираются с помощью флажка выбора. На 2-й странице установлен флажок Выбрать все из заголовка, и все строки на 2-й странице выбираются автоматически. Теперь при переходе на первую страницу выбор отсюда сбрасывается. Но флажок «Выбрать все» в шапке все еще установлен.

Хотите узнать, есть ли у кого-нибудь решение этой проблемы?

Любая помощь приветствуется.

Редактировать: Решение найдено в другом подобном GitHubПроблема: https://github.com/primefaces/primeng/issues/6482

Решение: https://github.com/primefaces/primeng/issues/6482#issuecomment-456644912

Может кто-нибудь помочь с реализацией переопределения в приложении Angular 7/8. Не в состоянии понять, как получить ссылку TableHeaderCheckbox и переопределить прототип.

1 Ответ

0 голосов
/ 07 ноября 2019

Что ж, решение проблемы до сих пор не добавлено в репозиторий PrimeNG, и поэтому даже последний пакет не решает его.

В настоящее время используйте решение, упомянутое в вопросе под Редактировать

Чтобы ответить на вопрос, который я задал в Редактировать , проверьте ниже:

// In some service file:

import { Table, TableHeaderCheckbox } from 'primeng/table';

@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 {
            this._selection = this.selection ? this.selection.concat([rowData]) : [rowData];
            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
        });
    };
}
...