Угловой материал2 Матричный стол на стороне сервера Выбор перекрестных страниц - PullRequest
Новая
       9

Угловой материал2 Матричный стол на стороне сервера Выбор перекрестных страниц

0 голосов
/ 24 февраля 2019

Как реализовать выбор строк между страницами на мат-таблице Angular Material 2 при использовании нумерации страниц на стороне сервера?

У меня есть рабочая таблица Angular Material с нумерацией страниц на стороне сервера.Однако реализация по умолчанию (как описано в документации по материалам) снимает все строки (и флажок «выбрать все строки») при переходе на новую страницу.

Я пробовал огромное разнообразие вещей / подходов(слишком много, чтобы документировать здесь), но вот некоторые фрагменты, которые могут быть полезны.Код был упрощен для ясности.

Массив selections.selected содержит все выбранные строки на страницах.При изменении функции isSelected по умолчанию на пользовательскую функцию - строки на страницах отображаются в выбранном виде.Обратите внимание, что в моем случае строки имеют уникальное свойство _id. 

private isSelectedCustom(row: any): boolean {
    return <boolean>this.selection.selected.find(o => o._id === row._id);
}

selection.isSelected = isSelectedCustom.bind(this);

Однако, если я сниму флажок с строки (перейдите на новую страницу и вернусь), строка снова будет проверена.Непонятно, почему, и я даже видел повторяющиеся строки в selection.selected при снятии отметки со строк и навигации по страницам.

Попытка вручную удалить строки (и повторяющиеся строки) из выделения не сработала, т.е. 

selection.onChange.subscribe(selection => {

    if (selection && selection.removed && selection.removed[0] && selection.removed.length == 1) {

        let removeId = selection.removed[0]._id;

        // Remove multiple occurences. Unknown how selection.selected can have duplicates.
        for (var i = this.selection.selected.length - 1; i >= 0; i--) {

            if (this.selection.selected[i]['_id'] == removeId) {
                console.log('force remove', this.selection.selected[i]);
                //this.selection.selected.splice(i, 1);
                this.selection.selected.
            }
        }
    }
}

Для флажка «выбрать все строки» невозможно получить, если выбраны все строки (потому что у клиента есть только страница строк, а не все строки).Поэтому я использую флаг, который явно установлен в true / false, когда «выбрать все строки» отмечен / не отмечен.

При переходе на последующие страницы, если флаг «выбрать все строки» имеет значение true, тогда я устанавливаю всепроверяемые строки. 

dataSource.data.forEach(row => selection.select(row));

Если строка не отмечена, я устанавливаю флаг "выбрать все строки" в значение false. 

if (selection && selection.removed && selection.removed.length > 0) {
    isAllPagesSelected = false;
}

Этот подход флажка "выбрать все строки", по-видимому, обычноработать, но чувствует себя грязно.

...