在AG-Grid中是否有实现在客户端进行数据排序和搜索的方法?

huangapple go评论180阅读模式
英文:

Is there any way to implement sorting and searching data from client side in AG-Grid?

问题

我想在网格中显示来自API的数据。所以我们已经在.NET Core C#中创建了API。

为了显示数据,我们在Angular中使用AG grid。

API已经在服务器端创建了分页。现在我想在AG Grid Angular中从客户端实现排序和搜索。

英文:

I want to show data in grid from API. so we have created API is in .NET Core C#.
For showing up data we are using AG grid in Angular.

API is created with pagination in server side. Now I want to implement sorting and searching from client side in AG Grid angular.

答案1

得分: 1

这不是在服务器端分页时使用客户端搜索和排序的最佳方法。您将只对当前页面上的数据进行排序或搜索,而忽略了所有其他行。

尽管如此,您可以启用客户端排序,通过将可排序参数添加到您的列定义中:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* 其他网格选项 ... */
</ag-grid-angular>

// 仅在 'name' 和 'age' 列上启用排序
this.columnDefs = [
    { field: 'name', sortable: true },
    { field: 'age', sortable: true },
    { field: 'address' },
];

您还可以使用 AG Grid 的快速过滤器来启用搜索:

<input
  type="text"
  id="filter-text-box"
  placeholder="筛选..."
  (input)="onFilterTextBoxChanged()"
/>
private gridApi!: GridApi;

onFilterTextBoxChanged() {
    this.gridApi.setQuickFilter(
      (document.getElementById('filter-text-box') as HTMLInputElement).value
    );
}
英文:

It's not the best approach to use client side search and sorting when you have a server side pagination.

What you will get is that you will sort or search only the data you currently have in the page, leaving out all the other rows.

Still, you can enable client side sorting, adding the sortable parameter to your column defs:

&lt;ag-grid-angular
    [columnDefs]=&quot;columnDefs&quot;
    /* other grid options ... */&gt;
&lt;/ag-grid-angular&gt;

// enable sorting on &#39;name&#39; and &#39;age&#39; columns only
this.columnDefs = [
    { field: &#39;name&#39;, sortable: true },
    { field: &#39;age&#39;, sortable: true },
    { field: &#39;address&#39; },
];

And you can enable searching using AG Grid Quick Filter:

&lt;input
  type=&quot;text&quot;
  id=&quot;filter-text-box&quot;
  placeholder=&quot;Filter...&quot;
  (input)=&quot;onFilterTextBoxChanged()&quot;
/&gt;
private gridApi!: GridApi;

onFilterTextBoxChanged() {
    this.gridApi.setQuickFilter(
      (document.getElementById(&#39;filter-text-box&#39;) as HTMLInputElement).value
    );
}

答案2

得分: 1

如果您想要服务器端分页,必须在服务器端使用排序和筛选。

英文:

if you want server-side pagination, you must use sorting and filter server side.

huangapple
  • 本文由 发表于 2023年7月6日 16:31:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76626937.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定