ngx-datatable Добавить шаблон столбца в коде - PullRequest
Новая
       7

ngx-datatable Добавить шаблон столбца в коде

0 голосов
/ 25 августа 2018

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

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

Я пытаюсь избежать повторения того же html 

<ngx-datatable-column *ngIf="screenMedium" [width]="40" [sortable]="false" [canAutoResize]="false">
    <ng-template ngx-datatable-cell-template>
        <span class="fa fa-chevron-circle-right text-primary" style="font-size:20px;cursor:pointer;padding:3px 0"></span>
    </ng-template>
</ngx-datatable-column>

Где "screenMedium" - true, если экран меньше 768 пикселей. Поскольку у меня будет около 20 таблиц на разных страницах, я не хочу поддерживать это, а делать это один раз в одном месте, и делать это автоматически, поскольку это часть «отзывчивого» аспекта моего приложения.

Это мой код, который не работает: 

 table: DatatableComponent;
  checkInfoButton(): void {
    var lastCol = this.table.columnTemplates.last;

    if (this.screenMedium == false) {
      if (lastCol.name == "info-button") {
        console.log('removing info button td!');
        // need to remove the button
        this.table.recalculate();
        let cols = this.table.columnTemplates.toArray();
        cols.pop();
        this.table.columnTemplates.reset(cols);
        this.table.recalculate();
      }
      return;
    } else if (lastCol.name == "info-button")
      return; // already present
    console.log('adding info button td!');
    let cols = this.table.columnTemplates.toArray();
    let col = new DataTableColumnDirective(cols[0].columnChangesService);
    col.name = "info-button";
    col.width = 40;
    col.canAutoResize = false;
    col.sortable = false;
    col.cellClass = 'fa fa-chevron-circle-right text-primary';
    //col.cellTemplate = '<span class="fa fa-chevron-circle-right text-primary" style="font-size:20px;cursor:pointer;padding:3px 0"></span>';
    this.table.columnTemplates.reset(cols);
    this.table.recalculate();
  }

Я не смог найти хороший способ добавить / удалить из списка запросов, поэтому конвертировал его в массив, удаляя из массива, затем сбрасывая table.columnTemplates в этот измененный массив. Я также не уверен, как поместить cellTemplate в коде, но это шаг 2.

...