默认情况下显示排序图标 - 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");
}

在这里，当我们单击标题标题时，将启用排序图标。有没有办法始终默认启用排序图标，而不仅仅是在标题悬停时。

Answer 1

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

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

单击"返回到"后

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

因此，您无法在更改 CSS 时显示或隐藏。您需要动态添加这两个分支，或者需要触发点击。

下面的代码将类作为向下图标添加到第一个标题。sort-asc和datatable-icon-up用于 ASC 排序，如果默认排序是降序，则应使用另一个类

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();

如果要显示两个图标，则需要自定义类

在style.css放

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

并添加自定义类而不是上面的两个类

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
}
}
}
}