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