我想在ngx-datable中使用 ngx-datatable
的排序功能来执行类似这个链接的操作。https:/swimlane.github.iongx-datable。
然而,这并不奏效。
我试过使用像这样的属性,但不成功。
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>
有一个排序的输出,叫做 捃 你可以使用它并使你的回调函数成为
(sort)="onSort($event)"