ngx-datatable, триггерная сортировка столбцов

У меня возникли проблемы с попыткой ручного запуска сортировки строк в ngx-datatable. Сценарий заключается в том, что на небольших устройствах я перемещаю некоторые столбцы из заголовка в ngx-datatable-row-detail, но когда я пытаюсь вызвать функцию customSort, строки в ngx-datatable не сортируются как я ожидал.

Шаблон выглядит так:

<ngx-datatable #myTable [columnMode]="'flex'"
                   [rows]="_appointments"
                   [rowHeight]="'auto'"
                   [sorts]="listProps.currentSort"
                   (sort)="sorted($event)"
                   [columns]="_tableColumns">

        <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow>
            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                <div class="ngx-table-toogle hidden-md">
                    <div [class.visible-xs]="myCol.collapse_xs" [class.visible-sm]="myCol.collapse_sm" *ngFor="let myCol of _collapsedTableColumns">
                        <div class="col-xs-12 col-sm-4" [class.sortable]="myCol.sortable" (click)="onCustomSort(myCol.prop,myCol.sortable)">
                            <div class="detail-row-header">
                                {{myCol.name}}
                                <span [class.sort-btn]="myCol.sortable" [class.sort-desc]="isSortedBy(myCol.prop,'desc')" [class.sort-asc]="isSortedBy(myCol.prop,'asc')"></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <span class="detail-row-data">{{getVal(row,myCol.prop)}}</span>
                        </div>
                    </div>
                </div>
            </ng-template>
        </ngx-datatable-row-detail>

И метод onCustomSort, например:

 onCustomSort(sortCol: string, sortable:boolean) {
        if (!sortable)
            return;

        let curdir = this.listProps.currentSort[0].dir === SortDirection.desc ? SortDirection.asc : SortDirection.desc;
        // Hmm, doesn't trigger a resorting of the table.
        this.listProps.currentSort = [{ prop: sortCol, dir: curdir }];
        this.table.sorts = this.listProps.currentSort;

    }

Я ожидал, что изменение this.listProps.currentSort вызовет обращение к таблице, потому что она привязана к [sorts]="listProps.currentSort", но ничего не происходит.

Любые идеи?


angular ngx-datatable
person MikNiller    schedule 18.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

На самом деле решение было очень простым, просто нужно было добавить

this.table.onColumnSort({ sorts: this.listProps.currentSort });

в метод onCustomSort, чтобы он выглядел так:

onCustomSort(sortCol: string, sortable:boolean) {
    if (!sortable)
        return;

    let curdir = this.listProps.currentSort[0].dir === SortDirection.desc ? SortDirection.asc : SortDirection.desc;

    this.listProps.currentSort = [{ prop: sortCol, dir: curdir }];
    this.table.onColumnSort({ sorts: this.listProps.currentSort });

}
person MikNiller    schedule 18.06.2018
comment
Можете ли вы предоставить полный код? Я не понимаю, что это за таблица. - person AFetter; 08.09.2020
comment
Нет, этого фрагмента кода давно нет, но this.table указывает на #myTable - экземпляр ngx-datatable. - person MikNiller; 08.09.2020
comment
Не беспокойся, дружище, я нашел решение. Спасибо за ваш повтор - person AFetter; 08.09.2020
comment
@MikNiller, чувак, ты знаешь, как исправить проблему изменения размера с неуместными столбцами? - person IamStalker; 05.05.2021