Angular ngx-datatable отключает сортировку и разбиение на страницы динамически через скрипт TS - PullRequest
Новая
       34

Angular ngx-datatable отключает сортировку и разбиение на страницы динамически через скрипт TS

0 голосов
/ 26 марта 2020

Я использую ngx-datatable. Angular версия 8. Я хочу динамически отключать сортировку и разбивку на страницы по щелчку и сохранять информацию в своей таблице при редактировании строк и ведении данных.

Вот пример того, что я делаю в настоящее время: 

<ngx-datatable class="material"
    #mydatatable
    headerHeight="50"
    footerHeight="50"
    rowHeight="auto"
    [rows]="rows"
    [columnMode]="ColumnMode.force"
    [selected]="selected"
    [selectionType]="'checkbox'"
    [selectAllRowsOnPage]="false"
    (select)='onSelect($event)'
    [limit]="10">
     <ngx-datatable-column
            [width]="30"
            [sortable]="false"
            [canAutoResize]="false"
            [draggable]="false"
            [resizeable]="false"
            [headerCheckboxable]="true"
            [checkboxable]="true">
        </ngx-datatable-column>
        <ngx-datatable-column 
        [sortable]="false"
        name="Action">
            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
            <span>
                    <a ngbTooltip="Edit" class="icon-set edit-icon" routerlink="/" (click)="setEdit($event, 'action' , rowIndex)" 
                    *ngIf="!value">
                        <i class="fa fa-pencil-alt"></i>
                    </a>
                    <a ngbTooltip="Save" class="icon-set edit-icon" routerlink="/" data-toggle="modal" (click)="setVars($event, 'action' , rowIndex)" data-target="#saveRowModal" 
                    *ngIf="value">
                        <i class="fa fa-check"></i>
                    </a>
                    <a ngbTooltip="Cancel" class="icon-set edit-icon" routerlink="/" data-toggle="modal" (click)="setVars($event, 'action' , rowIndex)" data-target="#cancelRowModal" 
                    *ngIf="value">
                        <i class="fa fa-times"></i>
                    </a>
            </span>
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Id">
            <ng-template ngx-datatable-cell-template let-value="value">
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Name">
            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                <span
                    title="{{value}}"
                    *ngIf="!editing[rowIndex]">
                    {{ value }}
                </span>
                <input
                    autofocus
                    class="form-control"
                    (blur)="updateValue($event, 'name', rowIndex)"
                    *ngIf="editing[rowIndex]"
                    type="text"
                    [value]="value"/>
                </ng-template>
        </ngx-datatable-column>
  </ngx-datatable>

Когда я нажимаю на редактировать, сортировка и разбиение на страницы должны быть заморожены (пользователь не должен иметь возможность сортировать или переходить на другую страницу). Я не мог получить какой-либо метод, который может быть достигнут здесь. Я попытался использовать [сортируемый], но это срабатывает, когда таблица отображается. Для нумерации страниц я попытался использовать пользовательский нижний колонтитул, но это исключает функциональность нумерации страниц.

Может кто-нибудь помочь мне с этим?

...