ngx-datatable Как добавить пользовательский значок в столбцы, в которых не выполняется сортировка - PullRequest
Новая
       60

ngx-datatable Как добавить пользовательский значок в столбцы, в которых не выполняется сортировка

0 голосов
/ 28 мая 2020

Я столкнулся с проблемой при попытке добавить пользовательский значок только к тем столбцам, для которых не выполняется сортировка. У меня есть приведенный ниже код, который добавляет настраиваемый значок в столбцы при начальной загрузке страницы.
Например, в приведенном ниже коде у меня есть 5 столбцов 1. При начальной загрузке все столбцы будут иметь настраиваемый значок по умолчанию (в моем случае , это как значки c и des c) 2. Я щелкаю заголовок суммы и выполняю сортировку по возрастанию в столбце суммы, который отображается как значок c. Это нормально отображается. 3. Затем я щелкаю столбец ссылки и выполняю сортировку по столбцу ссылки. Теперь столбец суммы, по которой ранее щелкнули, должен иметь настраиваемый значок по умолчанию. Не только этот столбец, но и все остальные столбцы должны иметь настраиваемый значок по умолчанию, кроме активно нажатого заголовка.

Короче говоря, после выполнения сортировки, если какой-либо из столбцов имеет class = "sort-btn", мне нужно чтобы добавить в эти столбцы собственный класс. 

    columns = [
        { name: 'Reference' },
        { name: 'Corporate' },
        { name: 'Transaction Date' },
        { name: 'Currency' },
        { name: 'Amount' },

      ];
        <ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Reference" prop="refName" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                                    <span class="empName">{{value}}</span>
                                                </ng-template>
                                            </ngx-datatable-column>
<ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Corporate" prop="corp" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                                    <span class="empName">{{value}}</span>
                                                </ng-template>
                                            </ngx-datatable-column>
<ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Transaction Date" prop="date" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                                    <span class="empName">{{value}}</span>
                                                </ng-template>
                                            </ngx-datatable-column>
<ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Currency" prop="currency" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                                    <span class="empName">{{value}}</span>
                                                </ng-template>
                                            </ngx-datatable-column>
<ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Amount" prop="amount" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                                    <span class="empName">{{value}}</span>
                                                </ng-template>
                                            </ngx-datatable-column>


         ngOnInit() {
            this.init();
          }

          init() {
            this.fetchDetails();
          }

          fetchDetails() {
             for (let i = 1; i <= this.columns.length + 1; i++) {
            if (i == 4) {
              document.getElementsByClassName("sort-btn")[i].classList.remove("datatable-iconCustom");
            } else {
            document.getElementsByClassName("sort-btn")[i].classList.add("datatable-iconCustom");
            }
          }

          }
...