如何使用Ag-grid在本地环境中进行过滤？
Ag-grid是一个功能强大的JavaScript数据网格库，用于在Web应用程序中展示和处理大量数据。它提供了丰富的功能，包括排序、过滤、分组、聚合、列固定、行选择等。
要在本地环境中使用Ag-grid进行过滤，可以按照以下步骤进行操作：
- 安装Ag-grid：在本地项目中使用npm或yarn安装Ag-grid的依赖包。可以通过以下命令安装Ag-grid Community Edition：
- 安装Ag-grid：在本地项目中使用npm或yarn安装Ag-grid的依赖包。可以通过以下命令安装Ag-grid Community Edition：
- 导入Ag-grid模块：在需要使用Ag-grid的文件中，导入Ag-grid的相关模块。例如，如果你使用的是React框架，可以在组件文件的顶部添加以下代码：
- 导入Ag-grid模块：在需要使用Ag-grid的文件中，导入Ag-grid的相关模块。例如，如果你使用的是React框架，可以在组件文件的顶部添加以下代码：
- 创建网格配置：在组件的构造函数或其他适当的位置，创建一个网格配置对象。该对象将包含网格的各种配置选项，包括过滤器。
- 创建网格配置：在组件的构造函数或其他适当的位置，创建一个网格配置对象。该对象将包含网格的各种配置选项，包括过滤器。
- 定义列定义：在网格配置对象中，定义列的定义（column definitions）。列定义将指定每列的名称、字段、过滤器等。
- 定义列定义：在网格配置对象中，定义列的定义（column definitions）。列定义将指定每列的名称、字段、过滤器等。
- 在上述代码中，
filter: true表示该列启用过滤器。 - 绑定数据：将数据绑定到网格中。可以通过调用网格API的
setRowData方法来实现。 - 绑定数据：将数据绑定到网格中。可以通过调用网格API的
setRowData方法来实现。 - 渲染网格：在组件的模板中，添加一个用于渲染网格的HTML元素。
- 渲染网格：在组件的模板中，添加一个用于渲染网格的HTML元素。
- 初始化网格：在组件的适当位置，初始化网格并将其绑定到HTML元素。
- 初始化网格：在组件的适当位置，初始化网格并将其绑定到HTML元素。
- 通过以上步骤，你已经成功在本地环境中使用Ag-grid进行过滤了。用户可以在网格的列标题上看到过滤器图标，点击图标可以打开过滤器面板，并根据需要进行过滤。
对于Ag-grid的更多详细信息和配置选项，你可以参考腾讯云的Ag-grid产品介绍页面：Ag-grid产品介绍。
相关·内容
我有一个要求，能够显示，排序，编辑和添加新的行到一个表，以获取/存储它的数据在数据库中。
我已经考虑过在angular 2中使用ag-grid，并且我能够显示和排序没有问题。但是，我找不到任何用于添加新行的文档。ag-grid是添加/编辑数据的好选择吗？如果是这样，您如何处理添加新行？
其次，我听说过primeNG的好消息，但我已经在使用ng2-bootstrap组件了。两者都用是个坏主意吗？
浏览 10提问于2016-06-23得票数 1
我们使用的是ag-Grid v9。我们更新到了ag-Grid v19。我们有一个下拉列表，其中加载了多个类别，我们可以一次选择一个类别，其数据将加载到ag-Grid中。我们对选定的类别应用列过滤器，并对相应的行进行过滤。但是，当我们更改类别时，应用的过滤器不会保留。早些时候，在v9中它工作正常，我们使用OnAfterFilterChanged()，但是在v19中，它被弃用，所以我们使用onFilterChanged()
浏览 26提问于2019-02-18得票数 0
1回答
在ag-grid中，我只找到了自定义的日期过滤器，但除了时间之外，我找不到任何用于过滤的东西。有没有人可以帮我做自定义过滤，只是为了时间。我有像hh:mm这样的列数据格式。我需要给用户过滤时间的特权。
我正在使用angularJs和免费版本的ag-grid。
浏览 4提问于2018-10-17得票数 1
1回答
我的项目使用的是ag-grid社区版本。它是否支持服务器端过滤和分页？如果不是，我们如何为ag-grid社区版本应用过滤？
浏览 33提问于2020-11-13得票数 0
回答已采纳
2回答
如何在Ag-Grid中以编程方式显示列PopupMenu？ PopupMenu Ag-Grid 使用gridApi，您可以隐藏它，但不能显示它 gridApi.hidePopupMenu() 我也尝试过FilterInstance和columnApi，但我没有找到任何可用的 gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ... 谢谢
浏览 28提问于2021-06-29得票数 0
回答已采纳
1回答
如果没有搜索栏，我面临的问题是从下拉列表中搜索所需字段需要更多时间，请告诉我如何在ag-grid下拉列表中添加搜索栏(角度)
浏览 56提问于2021-04-20得票数 0
我正在实现ag-grid master-detail。总的来说，它工作得很好。
我面临的问题是，当我筛选主网格时，子记录不会显示在展开的主记录上。
我不知道是ag-grid的bug，还是我的代码中缺少了什么。
需要注意的是，当我看到console时，没有抛出任何错误，而且仍然没有获取数据。因此，在筛选条件下展开master时，控件应该放在哪里。
我不会张贴代码，因为它将是大的。在有人能够阐明这个问题之前，这将是有帮助的。
浏览 3提问于2018-02-23得票数 0
3回答
我开始使用ag-grid，我需要在我的应用程序中进行一些更改，其中之一是当数据加载到表中时，在我的页脚中显示记录的数量，但当我开始筛选表中的数据时，当前行的数量开始减少。过滤数据时可以得到当前记录的长度吗？有没有一种方法可以获得当前过滤器的数据？
要实现的示例如下：
Data Loaded:
10/10
Data after being filtered:
7/10
浏览 14提问于2016-09-08得票数 0
1回答
在ag-grid中，如何从数据数组中检索行的索引，而不是.rowIndex属性，因为在应用排序和筛选时，rowIndex属性可能会更改。数据结构没有标识符，所以我不能在迭代数据时查找Id。(参见下面的Mike Smith示例)。根据下面的示例，当应用排序时，我如何获得“原始索引”属性？
我需要能够按照node.index而不是node.rowIndex的方式来做一些事情。
// Data I provide ag-grid
const unsortedData = [
{firstName: 'Mike', lastName: 'Smith'}, // or
浏览 1提问于2019-09-17得票数 0
1回答
Ag-角度上的网格能够创建网格从本地json文件中获取数据.在编辑任何行时，如何保存数据，然后发送到服务器或可能的本地json文件？
总之，Ag如何在编辑后保存行数据，并按下提交按钮发送到服务器。任何人如果在Javascript上实现了这一点，请评论，将尝试在角上使用。
请告诉我，除了ag-grid之外，还有其他最好的选择来实现这个功能。
浏览 0提问于2019-02-05得票数 5
回答已采纳
如何在ag-grid中增加自定义过滤器列表的宽度？ filterParams: {
newRowsAction: 'keep',
suppressMiniFilter: true,
**filterWidth: 500,**
values: function(params) {
setTimeout(function() {
params.success([
// code
]),
}
浏览 26提问于2020-06-17得票数 0
回答已采纳
在ag-grid中有一个我需要更改的功能，为此我需要更改一个函数，例如：
NumberFilter.prototype.onFilterChanged = function () {
var filterText = utils_1.default.makeNull(this.eFilterTextField.value);
if (filterText && filterText.trim() === '') {
filterText = null;
浏览 2提问于2016-03-05得票数 0
最近，我们在项目中使用了ag-grid。之前，我们只是使用ag-grid社区版本进行尝试。但是，我们想尝试一下企业版。我们同时导入社区和企业版，如下所示： "ag-grid-community": "^24.1.0",
"ag-grid-enterprise": "^24.1.0", 除了浮动滤镜是灰色的之外，所有的函数都可以正常工作。 可以同时导入ag-grid-community和ag-grid-enterprise吗？或者我们应该只导入其中的一个？ 如果我们可以同时导入这两个模块，如何解决所有浮动过滤器都被禁用的问题？ 浮
浏览 20提问于2020-12-22得票数 0
我在一个项目上工作，这需要农业网格-过滤与下拉下拉，这将过滤出一列的结果。 我已经尝试过使用react和redux form来实现这一点。 <select id="ddl" className="custom-select" onChange={this.jsFunction(this)}>
<option >Search category name</option>
<option value="1">1</option>
<option value=&
浏览 70提问于2019-02-04得票数 3
我在我的项目中使用AG-Grid，我正在通过(filterModified)监听我的过滤器修改事件。下面是我在html中调用ag-grid的代码 <div class="grid-container">
<ag-grid-angular
class="ag-theme-bootstrap"
[columnDefs]="columnDefs"
[modules]="modules"
[frameworkComponents]="frameworkCo
浏览 38提问于2020-07-21得票数 0
1回答
我想知道如何获取当前AG-Grid分页中的所有节点或行。
最接近这一点的是this.gridApi.getRenderedNodes()，但它不会显示当前页面中的所有行。
框架网站：。
浏览 19提问于2021-02-20得票数 0
我正在尝试将react-date picker与ag-grid ag-grid结合起来，提供了使用自定义日期选择器的文档，但我想知道是否有人成功地尝试将react-datepicker与ag-grid一起使用，如果有，可以提供示例吗？ Ag网格示例：https://www.ag-grid.com/javascript-grid/component-date/
浏览 32提问于2021-03-18得票数 2
回答已采纳
我使用的是ag-grid 22.1.1版本，在过滤器列表中我看不到我设置了属性的工具提示
filterParams:{showTooltips:true}` in specific column fields.
下面是类似于ag-grid文档的
致谢和问候
浏览 8提问于2021-04-30得票数 0
我想知道我们是否可以在ag grid中进行组合过滤。一些卷过滤在客户端，一些在服务器上。这有可能吗？ 我正在查看adaptabletools网站，他们已经在下面的serverOptions.link中建立了类似的功能。我也试图通过ag-grid api实现类似的功能。你能建议一下吗？ https://api.adaptabletools.com/interfaces/_src_adaptableoptions_searchoptions_.searchoptions.html
浏览 55提问于2020-09-03得票数 0
有关详细信息，请查看代码片段和注释。
问题要点：
在聚合物元件内使用ag-网格网络组件。由于样式形成，本地聚合物多姆不会在没有使用/deep/选择器的情况下被应用到网格中，所以我在dom-module标签之外使用了一个样式标记。来自外部标签的样式正被应用在chrome上，但它在Firefox中不起作用。
示例代码：
<!--
...
import files and dependencies
...
-->
<style type="text/css">
/*
ag-grid styles defin
浏览 2提问于2017-05-24得票数 0
回答已采纳
我使用的是ag-grid enterprise的set filter，如下所示：
是否可以在其中显示全选选项，以显示/隐藏所示图像中的列？
浏览 7提问于2016-10-07得票数 0
当使用css可以正确转换为&的&字符时，在ag-grid中不能正确显示。有没有人对如何正确使用这个有一个提示？
浏览 7提问于2019-07-29得票数 0
我是AEM的新手，想知道如何将作者实例带入本地实例。我可以使用git命令获取项目中推送的更改，然后使用mvn命令构建本地。但是，我看不到我在本地aem上的aem prod中所做的更改。
你能帮我解决这个问题吗？提前谢谢你！
浏览 26提问于2021-06-09得票数 0
尝试使用最适合的ag-grid，package.json是这样的： "ag-grid": "^18.1.2",
"ag-grid-angular": "^14.0.0",
"ag-grid-community": "^14.0.0",
"angular2-moment": "^1.9.0",
"@syncfusion/ej2": "^16.3.31",
"@syncfusion/ej2-angular-grids":
浏览 7提问于2021-06-26得票数 0
1回答
如果我将焦点放在除Ag-Grid Row之外的元素上，则Ag-Grid的键盘导航不起作用。 为了解决这个问题，我需要在执行按钮单击后重新聚焦到Ag-Grid行元素。 我尝试了以下方法来聚焦ag-grid行，但仍然不起作用。 this.elElement.nativeElement.querySelectorAll('.ag-row').attr('tabindex', -1).focus(); 在执行按钮单击后，我应该能够回到AG-Grid，以便在Ag-Grid中使用键盘导航
浏览 43提问于2019-05-08得票数 2
我们在我们网站的不同部分使用了ag-grid，在量角器测试中，测试打开了包含ag-grid的组件，测试冻结，不再发生任何事情。测试用例未完成。当ag-grid被初始化时，就会发生这种情况。如果我删除了网格，那么测试用例仍然可以正常运行。这个行为在我们使用ag-grid的每个地方都是一样的。
这是一个问题吗?或者还有什么地方可能是错的？
浏览 0提问于2016-08-16得票数 1
1回答
在ag-grid中有没有为过滤器设置配对键值的表单？(向用户显示与在filterModel中设置的值不同的值)
filterParams: {
values: { tyt: "Toyota",
frd: "Ford",
prs: "Porsche",
nss: "Nissan"
},
}
filterParams: {
values: ["Toyota", "Ford", "Porsche", "
浏览 4提问于2019-02-05得票数 0
如何在ag-grid中每次单击过滤器图标时调用一个函数。下面是我的代码。我的目标是在每次单击过滤器图标时重置Name列的过滤值。我必须使用agSetColumnFilter。我试过filterParams，但不是每次都调用，而是只调用一次，有没有人能带我到这里来？ constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: "Name",
field: "name",
width: 150,
浏览 63提问于2019-07-02得票数 0
1回答
我正在尝试React-Data-Grid，希望得到的捆绑包大小将比我目前在应用程序中使用的ag-Grid或Tabulator更小。
我在一个小组件中尝试它，以验证生成的包大小。但出乎意料的是，我的应用程序大小增加了大约10MB。而ag-Grid或制表器导致“仅”增加约2MB。我使用Laravel作为后台；我不会更改Laravel生成的webconfig.js，因为默认的webconfig对我的应用程序来说已经足够了。上面的结果是我执行该命令时的结果：
npm run watch
它由Laravel框架(Laravel Mix)生成的脚本提供。当然，如果我通过执行以下命令来运行生产模式：
npm
浏览 9提问于2020-02-27得票数 0
我需要使用拖放在ag-grid中对行进行重新排序。拖放方法很简单，但是当拖放发生时，似乎没有简单的方法来切换行的位置。
我尝试过
gridOptions.api.removeItems(selectedNode);
清除电流，然后
gridOptions.api.insertItemsAtIndex(2, savedNode);
但drop事件似乎重燃，阻止了这种方法。另外，insertItems (当第一次运行时)会在内部的ag-grid循环中崩溃。
我不想手动重新排序gridRows，然后重置gridRow数据，这会有点笨拙。这似乎是大多数网格上的常见要求，所以我认为这是可以做到的，但刚
浏览 11提问于2016-09-02得票数 1
回答已采纳
3回答
我在我的Angular 4应用程序上使用ag-grid来显示一个表。在date列中，我使用文档中的默认日期过滤器agDateColumnFilter。筛选器输入中显示的占位符始终为mm/dd/yyyy。是否可以将其更改为dd/mm/yyyy
浏览 3提问于2017-12-20得票数 3
我有一个名为"Match“的内容类型，它有一个本地和访问者。两者都是对名为"Team“的内容类型的节点引用。
从我的观点来看，我需要要求一支特定球队的比赛，不管该球队是本地的还是访客。在上下文过滤器中，我可以为“本地”，特别是“访问者”设置一个值。所以我想在这个案子里我需要一个或一个条件。
有人知道如何解决这个问题吗？
编辑:我已经找到了视图上下文过滤器或模块，但这就是问题所在，我的网站太大了，目前正在生产中，所以我们不想因为bug或其他原因而出现问题。
浏览 0提问于2015-05-19得票数 1
回答已采纳
? 如何在ag-grid表格的页脚显示特定列的合计。例如，如果我在ag-grid表中有列名称salary，那么我想在网格底部显示总工资和，如下面的屏幕所示。
浏览 321提问于2019-10-03得票数 3
回答已采纳
我创建了带有自定义列过滤器的Ag网格。当我在表中添加行时，筛选器不会更新。
请给我专家建议？
<ag-grid-angular #agGrid class="ag-theme-balham cis-ag-grid" [defaultColDef]="defaultColDef"
[columnDefs]="columnDefs" [rowSelection]="rowSelection" [rowData]="rowData" [suppressMenuHide]="t
浏览 2提问于2019-07-04得票数 0
如果用户在ag-grid中单击或选择一行，那么我想要触发一个单击事件。我找过医生了但没找到。
浏览 79提问于2020-08-07得票数 1
我正在尝试添加ag多列过滤器，
但得到的警告ag-Grid如下：
在寻找组件agMultiColumnFilter，但没有找到.
浏览 18提问于2021-09-04得票数 0
5回答
有没有什么api或者什么东西可以让我在一行中呈现HTML。我可以绑定简单的html，但是我的HTML是动态的，并且包含一些angular指令，那么，我如何在ag-grid中呈现那个HTML呢？
浏览 5提问于2016-03-09得票数 3
1回答
我使用的是ag-grid框架的AgGridModule Angular包装器。我的应用程序是一个Angular AOT应用程序，它使用ngx-translate库(它在页面加载时为当前选择的语言动态加载翻译数据文件)来处理本地化。这意味着翻译只能异步使用。因此，我不能只在gridOptions (as recommended)中设置localeText属性，因为在生成网格之前我没有文本。 有没有人知道如何处理这种情况？理想情况下，我只需为localeText属性分配一个RxJS Observable，它将在准备就绪时发送适当的文本对象，但这目前似乎不起作用。
浏览 79提问于2019-01-18得票数 0
在本地运行，找出style="height: 100%;"是否将网格折叠成水平线。将它设置为其他值，比如100px就行了。除了我的Angular是1.5.0，和ag-grid v8.1.0之外，一切都是一样的。
<div ng-controller="exampleCtrl">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
看起来像窃听器。
浏览 1提问于2017-02-23得票数 10
回答已采纳
1回答
我有一个使用Angular 2和ag-grid的项目。
colDef = {column: 'name', filter: myFunction()}
public myFunction () {
http.get('params_doesn't matter').subscribe((response: any) => {
console.log('params work, everything is fine');
http.get({response.id}).subscribe((r
浏览 1提问于2018-01-18得票数 0
1回答
我正在创建一个自定义过滤器，其功能与在ag-grid中内置的功能基本相同。
是：
var NumberFilter = (function () {
function NumberFilter() {
}
NumberFilter.prototype.init
唯一的区别是，我只需要更改函数
NumberFilter.prototype.onFilterChanged
用点代替逗号。但是覆盖所有的方法没有多大意义，有没有一种方法可以继承过滤器‘NumberFilter.prototype.onFilterChanged’的功能，只改变number
浏览 1提问于2016-03-06得票数 0
ag-grid的异步集滤波器。这些为我们的客户端提供了显著的速度提升和更低的传输有效负载，这是一个非常有价值的特性。但是，我们还在onGridReady中调用.setFilterModel来加载缓存和保存的筛选器配置。这两个功能无法同时运行。
重现方法的步骤：
打开Set Filter列上的Select filter图标，等待Set Filter填充单击Apply Filter setFilterModel()按钮。观察(函数行为与预期一致)
在成功应用过滤器模型时，setFilterModel()如何启动值回调函数？或者请建议如何使用同步回调而不是异步issue.Thanks
浏览 12提问于2018-12-04得票数 2
我是第一次使用Angular world.In我的项目，我想使用windows.open()在一个新的标签中打开一个组件，这些组件是在action中使用的-- are上下文菜单中的一个内置函数。因为它在Ag-grid中，所以不能使用其他html事件。 我有一个TestScreen1Component，它包含一个带有上下文的ag-grid，点击COnetxt菜单中的一个项目，我想在新的tab.Currently中打开TestScreen2Component我正在使用windows.open() menu.On routing.This在本地build.However中工作得很好，同时通过提供这
浏览 50提问于2019-09-23得票数 0
2回答
我正在尝试删除ag-Grid中的一行，如下所示：
let alertRow : RowNode = this.gridApi.getRowNode(rowIndex);
console.log(alertRow);
this.gridApi.updateRowData({remove: [alertRow]});
它给了我这个错误：
ag-Grid:找不到作为对象的数据项
我可以在控制台中看到RowNode是正确的节点并存在。我也可以使用updateRowData()来添加新行，但是尝试删除会导致这个错误。
我在角6组件中使用ag-Grid .
为什么移除不起作用？
浏览 2提问于2018-10-04得票数 9
回答已采纳
我正在尝试使用VueJS实现Ag-Grid，但使用的是vanillajs版本(没有任何包或模块管理器)。
我试着使用umd版本的ag-grid ()，如下例所示。
但是下面抛出了错误；
vue.js:634 [Vue warn]: Unknown custom element: <ag-grid-vue> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root&g
浏览 4提问于2020-01-02得票数 0
如何使用角度在ag-Grid中嵌入列标题的下拉列表？
如果我有一个带有"type“列的员工网格。员工类型有两个选项:永久和合同。在列标题中，我需要一个下拉列表。
浏览 0提问于2018-03-01得票数 1
注意到控制台中的新错误：
webpack-internal:///2:129 ag-grid: invalid gridOptions property '__ob__' did you mean any of these: groupSuppressBlankHeader,slaveGrids,rowData,columnDefs,excelStyles,pinnedTopRowData,pinnedBottomRowData,components
(anonymous) @ webpack-internal:///2:129
无法理解，最终决定从以下几个方面运行官方的Ag示
浏览 0提问于2018-03-16得票数 1
我是新来的..。我想知道在现有的框架工作中使用的ag-grid 5.1.0是否支持ag-grid主/细节网格。如何获得这些细节(按版本划分的特性)。
谢谢
我通过阅读ag-grid.js，发现主细节视图特性在v5.3.0上工作，这是一种痛苦:( )。我希望应该有一个版本的vise！
浏览 8提问于2017-05-30得票数 0
3回答
在数据表中，它支持单独的列搜索(select输入)。。除了通过键入过滤列之外，ag-grid还支持类似的功能吗？
浏览 12提问于2016-04-27得票数 1
我计划对一个具有JMS侦听器的现有应用程序进行代码更改。
为了测试侦听器是否在我的本地服务器上工作，我将应用程序部署到我的本地主机，并关闭运行相同应用程序的其他容器。
但是我的本地监听器不会接收到任何消息。确认其他容器工作正常，可以拾取和处理队列中的新消息。
你能想出任何可能的原因吗？
浏览 2提问于2016-02-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
