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 单元格的主要内容,如果未能解决你的问题,请参考以下文章

JS中的树状数据结构允许最快的节点查找?

数据结构:树状数组 学习笔记

如何为 ag-grid 行编辑实现验证规则

如何验证 ag-grid 单元格的数据?

Spring 基于角色的身份验证微服务应用程序

如何在#ag-grid for React 中执行单元格验证