Ag-Grid 树状结构基于验证将 cellClass 附加到 NodeChildren 单元格
Posted
技术标签:
【中文标题】Ag-Grid 树状结构基于验证将 cellClass 附加到 NodeChildren 单元格【英文标题】:Ag-Grid Tree like structure attach cellClass to NodeChildren cells based on validation 【发布时间】:2019-09-04 02:19:33 【问题描述】:在我的 Jquery&javascript、Angular 和所有单独的应用程序中,我都将 Ag-Grid 和 columnDefs 包括在下面:-
this.columnDefs = [
headerName: "Age",
field: "age",
cellRenderer: "agGroupCellRenderer"
,
headerName: "Name",
field: "name"
,
headerName: "Year",
field: "year"
,
headerName: "Country",
field: "country"
];
我的行数据如下所示
this.rowData = [
age: "Group A",
participants: [
age: 1,
name: "Michael Phelps",
year: "2008",
country: "United States"
,
name: "A.2",
age: 2,
year: "2008",
country: "United States"
,
name: "A.3",
age: 50,
year: "2008",
country: "United States"
]];
this.getNodeChildDetails = function getNodeChildDetails(rowItem)
if (rowItem.participants)
return
group: true,
children: rowItem.participants,
;
else
return null;
现在我想根据验证将 cellClass 附加到子网格值,例如:-
if(age< 23 || '')
return['classNameThatiWantToAttach'];
如何做到这一点??
您也可以为此在下面的 plunker 中进行更改:-
https://plnkr.co/edit/lmjtuqfId4FIsTI5luL8?p=preview
【问题讨论】:
只是为了在我的应用程序中通知rowData,我将从角度http服务获取,不会像这样使用JSON 【参考方案1】:你可以这样做
编辑列定义并向其添加 cellClass 函数
headerName: "Year",
field: "year",
editable: true,
cellClass: this.cellClass
然后定义函数并添加你需要的条件并返回一个带有类值的字符串
cellClass(params)
if (params.value >= 2015)
return "redClass"
不要忘记为类添加 css 样式。
Example
【讨论】:
validateAge() return (params) => console.log(params);返回 params.node.data.year === 2010; ;我做了这个改变,它对你的 plunker 有效,但在应用程序中对我无效 您可以检查 params.data 以获取函数内的任何其他列值。 谢谢我得到了我想要的其他列值,但它的值就像 - 控制台中的“age_Invalid|year_invalid”,现在从这里我想做这样的事情 - params.data.invalidDetails。包括(params.colDef.field)返回'className' 我现在无法提问 - 你能看看这个 plunker - plnkr.co/edit/lmjtuqfId4FIsTI5luL8?p=preview 并告诉我如何根据 invalidDetails 字段的值在选定字段上包含验证类【参考方案2】:请查看更新后的 plunkr,根据年龄验证显示红色单元格:
https://plnkr.co/edit/QZd2MM1LflQaruxdCmym?p=preview
this.columnDefs = [
// ...
headerName: "Age",
field: "age",
cellClassRules: this.getCssClass()
// ...
];
getCssClass(): [cssClassName: string]: (Function | string)
return
'invalid-age': this.validateAge(),
;
【讨论】:
感谢实现它,但是否可以根据其他单元格值更新类??就像你的情况一样 - if(country === 'United States') then apply class to YEAR Cell以上是关于Ag-Grid 树状结构基于验证将 cellClass 附加到 NodeChildren 单元格的主要内容,如果未能解决你的问题,请参考以下文章