默認顯示排序圖標 - ngx-datatable-column

Question

我在用

    <ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Name" prop="empName" [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() {
    document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");
  }

在這里，當我們點擊 header 標題時，排序圖標被啟用。 有沒有辦法在任何時候都默認啟用排序圖標，而不僅僅是在標題的 hover 上。

Answer 1

ngx-datatable 動態創建圖標。 它的初始部分是

<span class="sort-btn"></span>

點擊返回后

<span class="sort-btn sort-asc datatable-icon-up"></span>

所以你不能顯示或隱藏 css 改變。 您需要動態添加這兩個類或者您需要觸發點擊。

下面的代碼將類添加到第一個 header 作為向下圖標。 sort-asc和datatable-icon-up用於 asc 排序，如果默認排序為降序，則應使用另一個 class

document.getElementsByClassName("sort-btn")[0].classList.add("sort-asc");
document.getElementsByClassName("sort-btn")[0].classList.add("datatable-icon-up");

另一種方法是觸發點擊

document.getElementsByClassName("sort-btn")[0].click();

如果你想顯示兩個圖標，那么你需要自定義 class

在style.css放

.datatable-iconCustom:before {
    content: "\66 \65";
}

並添加自定義 class 而不是上面兩個 class

document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");

Answer 2

您可以添加默認的未設置圖標，如下所示：

.ngx-datatable { // datatable Style
  .datatable-header { // header Style
    .datatable-header-cell { // header Cell Style
      .sort-btn.datatable-icon-sort-unset::before { // Icon Style
        content: '\e968'; // You favorite Icon
        font-family: 'fontFamily'; // Your Font Family
        font-style: normal; // Font Style
     }
    }
  }
 }