Question

我正在尝试使用ngx-datatable的排序功能来执行类似此链接的操作：https://swimlane.github.io/ngx-datatable/

但是，它不起作用。

我很幸运地尝试使用以下属性：

sortable="true"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"

下面是ngx-datatable的代码和版本：

"@swimlane/ngx-datatable": "^15.0.2"

<section class="basic-elements">
<!-- Breadcrumbs -->
<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a routerLink="/">Home</a>
        </li>
        <li class="breadcrumb-item active">
            Pessoas
        </li>
    </ol>
</nav>

<div id="mb-4" class="row mb-4">
    <div class="col-md">
        <h1 class="h2">Pessoas</h1>
    </div>
    <div class="col-md">
        <button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2">
            + Nova Pessoa
        </button>
    </div>
</div>

<div id="mb-4" class="row mb-4">
        <div class="col-md-11">
            <input type="text" class="form-control" id="email" >
        </div>
        <div class="col-md-1">
            <button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top">
                Buscar
            </button>
        </div>
</div>

<div class="row text-left">
    <div class="col-md-12">
        <div class="card">
            <div class="card-content">
                <ngx-datatable 
                    class="bootstrap"
                    [rows]="rows"
                    [columns]="columns"
                    [columnMode]="'force'"
                    [headerHeight]="10"
                    [footerHeight]="35"
                    [rowHeight]="35"
                    [externalPaging]="true"
                    [externalSorting]="true"
                    [scrollbarH]="true"
                    [count]="page.count"
                    [offset]="page.offset"
                    [limit]="page.limit"
                    [sortType]="'multi'"
                    [sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
                    (page)="pageCallback($event)">

                    <ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140>
                            <ng-template let-row="data" let-value="value" ngx-datatable-cell-template>                                  
                                <a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)">
                                    <i class="fa fa-edit" title="Editar"></i>
                                </a>
                                <a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)">
                                <i class="fa fa-exchange" title="Substituir"></i>
                                </a>
                                <a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)">
                                    <i class="fa fa-trash" title="Remover"></i>
                                </a>                                    
                            </ng-template>
                        </ngx-datatable-column>                                             

                    <!--<ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75>
                        <ng-template ngx-datatable-cell-template let-value="value">
                            <span *ngIf="value">
                                <i class="fa fa-check fa-2x"></i>
                            </span>
                            <span *ngIf="!value">
                                -
                            </span>
                        </ng-template>
                    </ngx-datatable-column>-->

                    <ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass">
                    </ngx-datatable-column>
                    <ngx-datatable-column name="Inativo" prop="inativo" width=70>
                            <ng-template ngx-datatable-cell-template let-value="value">
                                <span *ngIf="value">
                                    <i class="fa fa-check fa-2x"></i>
                                </span>
                                <span *ngIf="!value">
                                    -
                                </span>
                            </ng-template>
                        </ngx-datatable-column>


                </ngx-datatable>
            </div>
        </div>
    </div>
</div>

Answer 1

有一个名为 sort 的排序输出，您可以使用它并创建您的回调函数

(sort)="onSort($event)"

如何在Angular中的ngx-datatable / ngx-datatable-column中使用排序？

1 个答案: