默认显示排序图标 - 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 标题时，排序图标被启用。有没有办法一直默认启用排序图标，而不仅仅是在标题悬停时。

Answer 1

ngx-datatable 动态创建图标。它的初始部分是

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

点击后 return 到

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

因此您无法通过 css 更改显示或隐藏。这两个类需要动态添加或者需要触发点击

下面的代码将 classes 添加到第一个 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: " ";
}

并添加自定义 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
     }
    }
  }
 }

默认显示排序图标 - ngx-datatable-column

Show sort icon by default - ngx-datatable-column

sorting

icons

angular