我想根据 ag-grid 中的条件将复选框设置为 true
I want to set checkbox to true based on a condition in ag-grid
我有一个基本上可以导入一些数据的按钮。此导入的数据需要与已加载的 ag-grid 中的数据进行比较,如果匹配,则将该特定行节点的 cehckbox 设置为 true。
这是检查条件的按钮:
enableCheck() {
alert('works');
if (this.DataService.isNotBlank(this.rowDataImport)) {
for (let i = 0; i < this.rowDataImport.length; i++) {
if (this.DataService.isNotBlank(this.rowData)) {
for (let j = 0; j < this.rowData.length; j++) {
if (this.DataService.isNotBlank(this.rowData[j].calDate)) {
for (const calDates of this.rowData[j].calDate) {
if (
this.rowDataImport[i].isin === calDates.isin ||
this.rowDataImport[i].portfolioName === calDates.portfolioName ||
this.rowDataImport[i].valuationDate === calDates.valuationDate
)
{
// alert('true')
this.checkValue = true;
} else {
this.checkValue = false;
}
}
}
}
}
}
}
}
this.checkValue 是一个标志,如果找到匹配则为真。
public gridColumnDefs = [
{
headerName: 'Portfolio Name',
field: 'portfolioName',
cellRenderer: 'agGroupCellRenderer',
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
pinned: 'left',
filter: true,
cellRendererParams:(params) => {
console.log(params);
if (this.checkValue) {
params.node.selected = true;
}
}
},
]
这里我使用了cellRendererParams。但我猜这只会用于加载。如果我想从外部值(即从上面给出的导入检查)更新 ag-grid 行,该怎么办?
首先,您应该为 defaultColDef
中的每一行添加 id
this.defaultColDef = {
getRowNodeId: data => data.id,
};
然后你可以找到这个id,然后把checkbox设置为true。
此外,您还可以按名称查找单独的字段。
真的很简单,你应该使用下一个组合
selectRow() {
this.gridApi.forEachNode(node => {
if (node.id == 1 || node.id == 2 || node.data.country == 'Australia') {
node.setSelected(true);
}
});
}
工作示例:
https://plnkr.co/edit/ijgg6bXVleOAmNL8
在此示例中,当我们单击按钮时 - 我们将 id 为 1 和 2 的两行以及具有国家/地区 'Australia'
的每个字段的复选框设置为 true
在您的情况下,您使用的配置不正确。
你应该cellRenderer
cellRenderer: params => {
if(params.value === 'Ireland') {
params.node.setSelected(true)
}
return params.value
},
我做了一些操作并做了下面的操作,效果很好。
this.gridApi.forEachNode(node => {
if (node.data.isin === this.rowDataImport[i].isin &&
node.data.portfolioName === this.rowDataImport[i].portfolioName &&
node.data.valuationDate === this.rowDataImport[i].valuationDate
) {
node.setSelected(true);
}
我有一个基本上可以导入一些数据的按钮。此导入的数据需要与已加载的 ag-grid 中的数据进行比较,如果匹配,则将该特定行节点的 cehckbox 设置为 true。
这是检查条件的按钮:
enableCheck() {
alert('works');
if (this.DataService.isNotBlank(this.rowDataImport)) {
for (let i = 0; i < this.rowDataImport.length; i++) {
if (this.DataService.isNotBlank(this.rowData)) {
for (let j = 0; j < this.rowData.length; j++) {
if (this.DataService.isNotBlank(this.rowData[j].calDate)) {
for (const calDates of this.rowData[j].calDate) {
if (
this.rowDataImport[i].isin === calDates.isin ||
this.rowDataImport[i].portfolioName === calDates.portfolioName ||
this.rowDataImport[i].valuationDate === calDates.valuationDate
)
{
// alert('true')
this.checkValue = true;
} else {
this.checkValue = false;
}
}
}
}
}
}
}
}
this.checkValue 是一个标志,如果找到匹配则为真。
public gridColumnDefs = [
{
headerName: 'Portfolio Name',
field: 'portfolioName',
cellRenderer: 'agGroupCellRenderer',
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
pinned: 'left',
filter: true,
cellRendererParams:(params) => {
console.log(params);
if (this.checkValue) {
params.node.selected = true;
}
}
},
]
这里我使用了cellRendererParams。但我猜这只会用于加载。如果我想从外部值(即从上面给出的导入检查)更新 ag-grid 行,该怎么办?
首先,您应该为 defaultColDef
this.defaultColDef = {
getRowNodeId: data => data.id,
};
然后你可以找到这个id,然后把checkbox设置为true。
此外,您还可以按名称查找单独的字段。 真的很简单,你应该使用下一个组合
selectRow() {
this.gridApi.forEachNode(node => {
if (node.id == 1 || node.id == 2 || node.data.country == 'Australia') {
node.setSelected(true);
}
});
}
工作示例: https://plnkr.co/edit/ijgg6bXVleOAmNL8
在此示例中,当我们单击按钮时 - 我们将 id 为 1 和 2 的两行以及具有国家/地区 'Australia'
的每个字段的复选框设置为 true在您的情况下,您使用的配置不正确。
你应该cellRenderer
cellRenderer: params => {
if(params.value === 'Ireland') {
params.node.setSelected(true)
}
return params.value
},
我做了一些操作并做了下面的操作,效果很好。
this.gridApi.forEachNode(node => {
if (node.data.isin === this.rowDataImport[i].isin &&
node.data.portfolioName === this.rowDataImport[i].portfolioName &&
node.data.valuationDate === this.rowDataImport[i].valuationDate
) {
node.setSelected(true);
}