美文网首页
ngx-datatable排序图标

ngx-datatable排序图标

作者: 窗外的雪儿飞 | 来源:发表于2019-04-18 14:48 被阅读0次
  1. 給ngx-datatable设置css属性
/deep/ .ngx-datatable{
    .sortable .sort-btn:before {
        font-family: data-table;
        content: "c";
    }
    .sortable .sort-btn.datatable-icon-down:before {
        content: "f";
    }
    .sortable .sort-btn.datatable-icon-up:before {
        content: "e";
    }
}
  1. 如果某一列不需要排序,则可设置sortable为false
<ngx-datatable #datatable>
    <ngx-datatable-column prop="name" name="name">
        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template [sortable]="false">
            <span *ngIf="value">{{value}}</span>
        </ng-template>
    </ngx-datatable-column>
</<ngx-datatable>
  1. 检索条件重置的时候重置Icon和排序
@ViewChild('datatable') datatable: DatatableComponent;
this.datatable.sorts = [];

相关文章

网友评论

      本文标题:ngx-datatable排序图标

      本文链接:https://www.haomeiwen.com/subject/exxtgqtx.html