美文网首页
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