Jhipster 对表进行排序和过滤答案

【问题标题】：Jhipster sort and filter a tableJhipster 对表进行排序和过滤
【发布时间】：2017-10-30 19:32:35
【问题描述】：

我是 Jhipster 世界的新手，我想知道是否可以在 jhipster 表（实体）中添加过滤器，例如：https://akveo.github.io/ng2-smart-table/#/ 或 http://ng-table.com/#/ 。 ?

谢谢

【问题讨论】：

是的，当然，任何适用于 angular 2+ 的东西，你也可以添加 ag-grid ag-grid.com/documentation-main/…
感谢您的回复，我在添加 ag-grid 之前尝试过，但没有成功。你知道我在哪里可以获得 Jhipster 应用程序的示例，或者你有什么建议吗？
否，但您应该使用 Angular 2+ 和 webpack 搜索示例。

标签： jhipster

【解决方案1】：

如果你使用 Angular，你可以像这样使用 JHipster Angular sort.directive.ts 和 sort-by.directive.ts...

    <table class="table table-striped">
        <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="methodThatOrdersTBodyRows.bind(this)">
            <th jhiSortBy="id"><span>ID</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="title"><span>Title</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="description"><span>Description</span> <span class="fa fa-sort"></span></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

为方便起见，您的<tbody> 应使用*ngFor 指令呈现控制器提供的数据行。每当单击过滤器箭头时，jhiSort 指令将更新您的predicate 组件变量以匹配提供给jhiSortBy 指令的值，并将ascending 组件变量切换为真和假。您应该在回调中使用谓词和升序变量（引用为this.predicate 等）来重新排序（或使用排序参数重新查询）由*ngFor 指令呈现的行数据数组。

【讨论】：