当“valueGetter”在视图之外或隐藏时，Ag-grid列不会触发
Ag-grid是一个流行的用于构建数据表格的开源JavaScript库。它提供了丰富的功能和灵活的配置选项，使开发人员能够快速创建强大的数据表格。
在Ag-grid中，每个列都有一个valueGetter属性，用于定义从数据源中提取数据的方法。当valueGetter所在的列在视图之外或者隐藏时，默认情况下不会触发数据提取。
这个特性可以带来一些优势和应用场景。例如，当数据量非常大时，如果所有列都实时提取数据，会增加页面渲染的时间和资源消耗。通过限制只在视图内或显示的列触发数据提取，可以提高表格的性能和响应速度。
对于开发人员而言，了解这一特性可以帮助他们更好地控制数据的提取和渲染。他们可以根据实际需求，选择在特定的列上使用valueGetter，并合理设置列的显示和隐藏，以优化表格的性能和用户体验。
腾讯云提供了一系列与数据处理和云计算相关的产品，适用于各种场景和需求。以下是一些相关的产品和其介绍链接：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景。产品介绍：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、可靠的数据存储和管理服务。产品介绍：https://cloud.tencent.com/product/cos
- 腾讯云容器服务（TKE）：提供弹性和可扩展的容器化应用管理平台。产品介绍：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：提供高性能、可扩展的云数据库解决方案。产品介绍：https://cloud.tencent.com/product/tencentdb
- 腾讯云人工智能（AI）服务：提供强大的人工智能能力，包括语音识别、图像识别、自然语言处理等。产品介绍：https://cloud.tencent.com/product/ai
请注意，以上只是腾讯云部分相关产品的介绍，更多详细信息和产品选择可以访问腾讯云官方网站进行了解。
相关·内容
如果ag-grid列定义是用值getter定义的，或者如果为单元格定义了表达式，则值在网格上显示得很好。但是，如果单元格使用的是单元格表达式/值获取器，则无法找到在给定单元格中访问值的方法。试图通过api.forEachLeafNode访问数据，但似乎即使内存中的模型也没有这些数据。我发现的唯一方法是将数据导出为CSV，然后使用getDataAsCsv(params)解析数据。
导出数据是使用值getter访问网格中列值的唯一方法吗？
为什么内存中的模型没有要访问的数据？
浏览 3提问于2016-12-29得票数 1
2回答
我对ag-grid有问题。我尝试将我的数据绑定到ag-grid。因此，当我在系统中输入新年级时，我将ag-grid扩展了一列：
var newGrade = {headerName: "Grade", field: 'grades[' + indexOfNewGrade + '].value'};
this.$scope.columnDefs.push(newGrade);
this.$scope.gridOptions.api.setColumnDefs(this.$scope.columnDefs);
this.$scope.gridOpti
浏览 1提问于2016-05-10得票数 3
我想知道在ag-grid的单元格中显示一个表(包含来自多个fields的数据)的最佳实践是什么
我认为我可以让它将整个表格格式化为html字符串，并使用cellRenderer将其作为field传递给网格，但是我不希望在服务器端使用这种视图逻辑。
我真的希望列定义能够接受多个字段，但这似乎是不可能的。
有什么想法吗？谢谢。
浏览 0提问于2018-06-15得票数 4
我有一个ag-grid表，其列定义如下：
{ headerName: 'Population', field: 'properties.population', sortable: true, filter: 'agNumberColumnFilter'}
我收到的数据是用于population的，它是一个内部带有数值的字符串，例如：
[
{
"properties": {
"state": "Alabama",
"name": "Montgo
浏览 2提问于2020-01-09得票数 1
如何使用角度在ag-Grid中嵌入列标题的下拉列表？
如果我有一个带有"type“列的员工网格。员工类型有两个选项:永久和合同。在列标题中，我需要一个下拉列表。
浏览 0提问于2018-03-01得票数 1
每当我从任何服务器获取数据以在ag-grid中显示数据时，ag-grid都不会维护使用valueGetter选择值并自动将该列放在末尾的列的列顺序。
问题在以下代码沙箱链接中被复制： 作为最小可复制示例
从服务器接收的数据采用以下格式
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address":
浏览 2提问于2021-06-11得票数 1
回答已采纳
我正在测试可怕的组件(真的很酷！)用于一个新的Angular2项目。它应该用来显示具有“结构”(也称为“树”)的CAD模型结构，每个节点都是CAD模型的属性。
现在，很有可能在ag-Grid中建立一棵树.以其最简单的形式，data属性保存节点的属性(CAD模型属性)。在这种情况下，通过将属性editable: true分配给columnDefs，可以轻松地使单元格可编辑。
然而，问题是，如果在结构(树)的许多地方使用CAD模型，并且一个被编辑，那么所有其他的都不会改变。
相反，模型(节点)实际上应该是引用数据，而不是数据本身。好的，ag-Grid没问题。在这里，您可以看到具有复制的节点的树与具
浏览 8提问于2016-02-25得票数 1
回答已采纳
1回答
简而言之:有没有办法实现数字列过滤器的自定义比较器？
说来话长：
我在Angular (2)中使用了ag-grid。我为我的ag-grid中的单元提供了自己的组件：
let column = {
headerName: column.header,
field: column.id,
cellRendererFramework: DynamicComponent,
filter: this.convertFormatToFilterType(column.format) // returns "text", "number" or "da
浏览 1提问于2017-06-16得票数 1
当我使用带有tooltipField属性的ag-grid时，我被卡住了。我想实现工具提示在农业网格的每一行。
代码如下。此代码不起作用。
{
headerName: 'vital',
field: 'indicator',
tooltipField: 'indicator',
cellRenderer: (p: any) => {
return '<div align="center"><button class="btn btn-sm btn-primary"
浏览 89提问于2016-08-31得票数 7
目前，我正在使用下面的方法来分配新的选项给指定的日期列字段。但它不会在网格中显示。
let dateValues = ["equals", "inRange","quarter1","quarter2","quarter3","quarter4"];
{
headerName: "Assigned Date",
field: "assignedDate",
filter: "date",
f
浏览 12提问于2017-05-18得票数 0
我在连接网格数据时遇到了问题。我得到了这个错误，因为在我试图显示的数据中没有列。
Json数据可用如下所示：
[{id=1,customerNo:10},{id=2,customerNo:11,customerName:"Skarakas"}]
Ag-网格柱如下：
[{
headerName: "id",
field: "id"
}, {
headerName: "Customer No",
field: "customerNo"
}, {
headerName: "Customer N
浏览 0提问于2019-12-11得票数 0
回答已采纳
2回答
我正在使用Angular Grid (ag-grid)来显示数据。我正在尝试在我的角度网格中显示嵌套的json数据。但我没有成功。
下面是示例json数据和colDefs。请建议为什么点运算符不像jqgrid那样工作，将网格列映射到嵌套的json字段。
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData =
浏览 13提问于2015-09-30得票数 6
回答已采纳
如果使用值getter定义了ag-grid列定义，则该值可以很好地显示在网格上。但是，如果单元格使用单元格的值获取方法，我无法找到访问该单元格中的值的方法。尝试通过api.forEachNode访问数据，但没有显示数据。我发现的唯一方法是将数据导出为CSV，然后使用getDataAsCsv(params)对其进行解析。
导出数据是使用值getter访问网格中列的值的唯一方法吗？
提前感谢：)
浏览 34提问于2020-05-14得票数 0
回答已采纳
在ag-grid中，较小屏幕上的不可见列是否可能在行开始时自动折叠到+按钮中，然后在用户按此按钮时显示为行堆栈？
浏览 4提问于2020-04-14得票数 1
3回答
我正在使用ag-Grid，但当它过滤我的数据时有一个问题，当我过滤价格列中的数据时，它只适用于数字点，而不适用于逗号。
Link: https://plnkr.co/edit/LDdrRbANSalvb4Iwh5mp?p=preview
实际示例:在Price列中选择等于或大于等于的框中插入"1.5“，然后尝试插入"1,5”
浏览 2提问于2016-03-02得票数 1
4回答
如何在AG-Grid中设置日期列的呈现格式？当我查看示例时，我看到了dd/mm/yyyy格式的日期，但我的日期列总是以一种相当长的格式显示，类似于"Sat 2012201201:00 GMT+0100 (BST)“。我想要一个默认的YYYY dd格式，用户可以自己配置他们想要的格式。我发现的示例显示了如何使用比较器进行自定义筛选，但是除了日期的实际呈现方式之外，默认的方法对我来说很好。
谢谢你，特洛伊
浏览 1提问于2018-10-14得票数 7
回答已采纳
我想知道如何根据集合的属性字段对列的筛选值进行分组。
列数据：
{
users: [
{id: 1, isExternal: true, name: "John" },
{id: 2, isExternal: false, name: "George"},
{id: 3, isExternal: true, name: "Bob"}
]
}
外部用户由valueGetter函数格式化：
columnDefs: [
{
enableRowGroup: true,
field: "use
浏览 3提问于2020-07-17得票数 1
回答已采纳
1回答
我正在使用AG-Grid，我想禁用或隐藏列选择选项从列标题和列工具面板。请参阅下面有关我想禁用或隐藏的内容的图片：
在构建AG-Grid网格时，是否有禁用或隐藏列选择复选框的方法？
浏览 12提问于2022-01-06得票数 0
回答已采纳
PROBLEM：自定义格式化日期是不可过滤的(尽管它是可排序的)。
日期数据以防火墙秒(与UNIX时间戳相同)为单位，纳秒格式&然后首先转换为Javascript日期/时间格式(Tue Apr 13 2021 00:27:20 GMT-0400 (东部夏令时间))，然后在屏幕截图中转换格式(4月13日，2021)。
我的期望是，我遇到的问题是，我不能这样格式化日期(2021年4月13日)和过滤器-唯一的方法过滤是格式化日期MM/DD/YYYY。
列定义：
{
flex: 1,
field: 'created',
headerName: &#
浏览 0提问于2021-05-10得票数 5
我的ag-grid数据透视表是否可以有两条分组的信息，但在列级而不是行级。
例如，World将显示为列标题，而不是向下钻取。
var columnDefs = [
{headerName: "Country", field: "country", width: 120, rowGroup: true, enableRowGroup:true},
{headerName: "Region", field: "region", width: 120, rowGroup: true, enableRowGroup:t
浏览 3提问于2019-07-24得票数 0
1回答
我使用的是angular ag-grid，我有一个如下的列定义。
columnDefs=[
{field:'rate' , sortable:true, filter:true, headerName: " RATE", valueGetter: this.rateValueGetter }
rateValueGetter函数如下。
rateValueGetter(params): String {
if(params.colDef.field=="rate"){
if(params.data.rate.includes('1
浏览 7提问于2021-05-22得票数 0
1回答
我试图在ag-Grid中创建一个细列，使用两种不同的颜色显示买卖传奇。请见下文：
但是，即使在指定宽度为8px之后，我也会得到一个36px列。实现这一目标的最佳途径是什么？我目前正在使用cellClass函数设置背景色，并使用valueGetter函数返回单元格的空白值。下面是代码：
const sideLegendCellClass = (params: CellClassParams) => {
return [
params.data.side === 'buy'
? classes.buyLegend
浏览 2提问于2020-10-04得票数 2
回答已采纳
问题是，如果您不使用ObjectListView中的check-state列，那么每行都会出现这样的空白：
特别是当您希望使用一个小列来显示行号时：
这使得看起来不太好，您如何使每行展开到开始？
浏览 4提问于2014-08-01得票数 1
回答已采纳
我有一个使用angular 5绑定json的嵌套和数组来绑定ag-grid的场景。我尝试在我的colDefs行数据上使用valueGetter作为Json来绑定。似乎什么都没有解决。我也看不到有文档的例子。
这是我到目前为止所拥有的json和代码。
Json：
{
"packages": [
{
"packageId": 2,
"name": "Name1",
"isEnabled": true,
"packageRegistrationTypes": [
{
&
浏览 0提问于2018-06-04得票数 0
我正在尝试对包含自定义HTML的单元格数据实现列排序，因此我假定需要实现一个自定义函数来覆盖常规排序例程，并将其指向原始值，而不是HTML呈现的输出。
我不能从ag-grid文档中收集我是如何做到这一点的，我看到了，它描述了我的问题的解决方案，但是解释和示例代码并没有帮助我解决这个问题。看起来我需要一个比较器，但是在他们关于dateComparator的例子中，不清楚参数(date1，date2)是如何提供给自定义函数的。
我在下面添加了一些示例代码来说明这个问题，包括一个比较器函数，当按下列标题对行进行排序时会调用该函数。
var columnDefs = [{ field: '
浏览 65提问于2018-02-28得票数 3
我正在尝试从以字符串或数组形式出现的数据创建一个超链接，比如{"value":"link text~docid"，"link text 1~docid1“}。我正在使用单元格渲染器创建链接。但是，该列的筛选器显示"link text~docid“。因为我希望它只显示“链接文本”。问题是当我使用valueGetter时，它会修改"params.data.value to {" value ":"link text"，"link text1"}，这样我就无法生成超链接。我想检查在ag-grid中
浏览 1提问于2016-05-11得票数 0
我正在实现用于服务器端分组、排序、加载等的ag-grid企业版。刷新视图时出现问题，例如。当我滚动到底部，并单击按特定列排序时，滚动仍在底部，因此第一个数据被加载到表的底部，当我向上滚动时，我得到反向排序或任何你可以称之为它的东西。当我点击sort时，我期望发生的是整个ag-grid视图转到之前的状态，在顶部滚动刷新/重新初始化。
这是，您可以在其中看到当行被排序时，ag-grid是如何重新初始化的。当我将代码从这个plunkr复制到angular中时，它正常工作，直到我将rowDataType更改为服务器端
rowDataType = 'serverSide';
params
浏览 7提问于2018-11-07得票数 1
1回答
版本： vueJS: 3.0.0
bootstrap: 5.0.0-beta3
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2 请看下面的截图。在ag-grid的columnDefs中，我为Pending列指定了checkboxSelection: true。我不希望在该栏中呈现任何文本。相反，我希望每个单元格都有一个居中的复选框。这是可以做到的吗？现在，复选框在单元格中左对齐。 这是Pending的columnDef { headerName: "Pending", field: "pending", sorta
浏览 299提问于2021-11-18得票数 0
回答已采纳
1回答
如何从ag-grid单元格模板触发一个angular js函数(ng-blur)？ 下面是我对ag-grid的列定义 var columnDefs = [
{headerName: "Make", field: "make" , template:'<input type="text" class="form-control control-width-90 margin-left-5" ng-blur="alert(\'wewew\')"/>'},
浏览 11提问于2020-09-28得票数 0
2回答
当用户尝试过滤任何列时，我需要显示没有找到的结果消息。
在AG-Grid中有实现它的方法吗？
[noRowsOverlayComponent]="noRowsOverlayComponent"
在这里找到例子。尝试输入任何列的不正确值。
浏览 0提问于2018-03-09得票数 2
回答已采纳
我有一个名为Account Verification的列，它返回值为true或false。我将表中的值格式化为Yes和No，但是在过滤列时，我仍然必须搜索true或false才能过滤该列。我设置了一个自定义的过滤条件，但它不起作用。有谁有解决方案吗？
columns = [
{
headerName: 'Account Verification', field: 'accountVerified', filter: 'agTextColumnFilter',
// Cell renderer
浏览 13提问于2018-06-21得票数 0
使用:我们使用ag-grid就像在我们的客户端软件上使用excel一样。在它里面，我们有一些我用valueGetter函数运行的自定义计算。我们的网格有超过50个ColumnDefs。这意味着在您分别向右或向左滚动之前，某些列不会显示在视图中。我的所有函数都可以工作，并且没有计算问题。 问题:当我编辑一个值时，我有一些列现在需要触发valueGetter。对于当前在视图中的列，它们会触发并运行calc，而不会出现问题，但是有些列不在视图中，有些列是隐藏的。具体地说，在这些情况下，网格不会运行值getter，直到它在视图中，或者列上的隐藏标志被设置为false。 这是一个问题的主要原因是，因为
浏览 44提问于2021-07-30得票数 0
2回答
我有一个函数为我的网格分配列定义。有一个名为valueGetter的键，我需要分配函数来调用这个键来获取这个列的值。我面临的问题是我的API以字符串的形式返回这个值。
当我把它通过
valueGetter: column.valueGetter，
它看起来像这个valueGetter: valueGetter，但是它不工作。但是，如果我手动将其设置为valueGetter: this.getSellerAgentandOffice，它就能工作。因此，问题是如何将column.valueGetter字符串值设置为函数名？
同样的，当我尝试使用
valueGetter: thiscolu
浏览 12提问于2022-08-19得票数 -3
回答已采纳
在ag-Grid中，当行在Gmail中悬停时，我想显示动作按钮。无论滚动位置如何，操作按钮都必须出现在网格的右侧。
在中提到了一种方法。他们在最后一列中使用了cellRenderer，并在发生"onCellMouseOver“时显示了其中的按钮。只有在始终查看最后一列(使用cellRenderer)时，此方法才能工作。如果该列退出视图，操作按钮也将退出视图。
我不能使用这种方法，因为在我的例子中，有许多列，而且我的网格中的所有列都不适合同时出现在屏幕上。因此，根据滚动位置，在右侧可以有任何列，因此我们不知道要在哪个列上添加cellRenderer。
我们如何做到这一点？
浏览 2提问于2020-06-13得票数 4
回答已采纳
我的应用程序
我的应用程序的目的是下载WWDC视频的字幕文件。这些字幕可以在视频和幻灯片文件所在目录的宏子目录中作为名为“fileSequence0.webvtt”、“fileSequence1.webvtt”的WebVTT文件提供。
如果您有任何WWDC视频(或幻灯片)文件，您可以获取下载它的URL，删除文件名，并添加必要的额外路径组件来创建字幕URL，然后下载该字幕文件--这就是我的应用程序所做的。
我的模型
虽然我最初设想的是两层模型，但最终我得到了一个单一的平面列表，所以我现在只是将大纲视图作为一个普通的表视图--没有任何项目有任何子视图。
我的项目是下载源，每个项目都具有以下属性：
浏览 0提问于2013-07-23得票数 2
回答已采纳
2回答
如何在Ag Grid中隐藏列？
、、、、
我正在从数据库中获取数据，并通过在Ag-Grid中添加一个手动操作按钮列来填充它。现在，第一列由操作按钮组成，第二列包含_id，我想隐藏第二列，但在ag-grid文档中，它们只给出了关于隐藏静态数据列的信息。下面是我的代码，它有def列。
setMasterData (state, payload) {
if (!payload) {
state.tableData.rows = [];
} else {
// First column holds the buttons to delete the row item
let cols = [{
field: '&#
浏览 1提问于2018-07-14得票数 2
回答已采纳
我使用ag网格构建了一个网格，对于我发送自定义的单元格编辑器来呈现我自己的日期组件的一个列，这个列也有valueGetter来格式化要显示的值，我的问题是:单元编辑器得到了格式化的值，这个值是从valueGetter返回的，我想要有源值，我怎么做呢？下面是my columns对象的定义：
const columnsObject = [
{
field: 'date',
colId: 'date',
headerName: 'date',
f
浏览 3提问于2020-11-23得票数 0
回答已采纳
我的客户希望一些函数(隐藏/显示某些列)出现在表中每一列的过滤器窗口中(不仅仅是那些实际上可以隐藏或显示的列)。
我知道我可以定义一个自定义过滤器，但我不需要修改过滤器逻辑，我只需要在它的窗口中添加一些按钮(以及相关的操作)。有没有可能在不重新定义整个逻辑的情况下做到这一点？
谢谢
浏览 2提问于2017-01-16得票数 0
回答已采纳
经过大量的研究之后，我不得不问这个问题。简单地说，我想在ag网格中使用Javascript来折叠或隐藏特定的行。我尝试过在ag-grid文档中解释的几种方法，也尝试过这样的方法，但到目前为止，还没有一种方法起作用。
以下所有方法都已尝试过，但没有一种编码有效。
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.valu
浏览 0提问于2021-08-17得票数 0
回答已采纳
概述
在以前的ag-grid版本<10.1.0中，可以在不刷新网格的情况下以这种方式添加一行：
let model: IRowModel = this.gridOptions.api.getModel();
const skipRefresh = true;
model.addItems( [ obj ], skipRefresh );
从ag-grid 10.1.0开始，addItems()方法就被弃用了，并且已经被完全移除。文档建议改用updateRowData()：
this.gridOptions.api.updateRowData( { add: [ obj ] } );
问
浏览 3提问于2017-12-18得票数 3
7回答
如何在AG-Grid中隐藏列，以及它不应该显示在工具面板中...
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
浏览 492提问于2016-06-22得票数 24
回答已采纳
在ag-Grid中，如果列所占的空间小于网格的宽度，则在最后一列的右侧出现一个空孔。请参阅下面(取自的示例)：
我团队中的UX设计师不喜欢这样。他们希望看到行一直延伸到右边，以平衡外观。这和ag-Grid有关系吗？
编辑：我们不想使用sizeColumnsToFit选项，因为在大型监视器上，它生成非常宽的列，网格变得不可读。我们希望使用autoSize选项来压缩列，并按照上面的建议在RHS上填充空白条。
浏览 8提问于2021-01-07得票数 4
1回答
如果某个字段设置为“管理显示”上的“隐藏”，除非在视图中显示，否则该字段在站点上的任何位置都看不到。
指定字段的显示方式说：
Format 格式列包含以不同格式显示字段值的选项。隐藏是存在于所有格式选项列表中的全局值。如果您选择“隐藏”，它将隐藏整个字段，以免显示在内容页上。
我知道它隐藏了视图模式下的字段，但是如果不尝试使用这些模块来隐藏字段，这些模块就是用来输出字段的，比如视图模块。
即使没有使用这些模块，用户是否仍然可以看到隐藏的字段？
浏览 0提问于2017-01-18得票数 0
我已经使用ag-grid angular创建了一个表。因为我有两个列组。我想在第一个组中添加一个新列，新列应该在组中的第二个位置。
但是当我添加新的列组时，它放在所有列的末尾。
如何才能将新列放到所需位置。
浏览 3提问于2020-04-16得票数 0
我根据后端的响应在ag-grid中显示列。我总共有15列，我已经使用‘隐藏’隐藏。现在，根据响应的不同，我使用'setColumnVisible‘，每个响应显示4-9列。但是，在执行此操作时，列将向左对齐，并且网格的一半是空的。有什么帮助或变通方法吗？附加网格外观的截图：
浏览 1提问于2018-04-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
