0%

ngx-datatable排序图标

发表于 更新于
本文字数： 848 阅读时长 ≈ 1 分钟

  1. 給ngx-datatable设置css属性

    1
    /deep/ .ngx-datatable{
    2
        .sortable .sort-btn:before {
    3
            font-family: data-table;
    4
            content: "c";
    5
        }
    6
        .sortable .sort-btn.datatable-icon-down:before {
    7
            content: "f";
    8
        }
    9
        .sortable .sort-btn.datatable-icon-up:before {
    10
            content: "e";
    11
        }
    12
    }

  2. 如果某一列不需要排序，则可设置sortable为false

    1
    <ngx-datatable #datatable>
    2
        <ngx-datatable-column prop="name" name="name">
    3
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template [sortable]="false">
    4
                <span *ngIf="value">{{value}}</span>
    5
            </ng-template>
    6
        </ngx-datatable-column>
    7
    </<ngx-datatable>

  3. 检索条件重置的时候重置Icon和排序

    1
    @ViewChild('datatable') datatable: DatatableComponent;
    2
    this.datatable.sorts = [];