Ag 网格树数据答案

【问题标题】：Ag grid tree dataAg 网格树数据
【发布时间】：2017-11-14 06:04:13
【问题描述】：

我有一个带有树数据的 ag 网格，它从视图中过滤掉被删除的行

[  
   {  
      "name":"test",
      "children":[  
         {  
            "name":"test",
            "ROWSTATE":"DELETE"
         },
         {  
            "name":"test",
            "ROWSTATE":"DELETE"
         }
      ]
   }
]

这是我的数据，过滤器配置是这样的

isExternalFilterPresent: () => { return true; },
            doesExternalFilterPass: (node: RowNode) {
        return node.data.ROWSTATE !== ROWSTATE.DELETE;
    }

网格不显示任何值，因为所有的孩子都没有通过我想的过滤器功能。我想要做的是让网格显示包含父项的行。

【问题讨论】：

我们可以在 plunker 中看到它吗？

标签： angular ag-grid

【解决方案1】：

这也发生在我身上。作为一种解决方法，我所做的是在 gridOptions 上修改我的getNodeChildDetails 函数，以检查是否删除了所有子项。如果他们都是，那么不要返回任何东西。这样，ag-grid 不会将该行视为父行。

var gridOptions = {
    ...
    getNodeChildDetails: function(row) {
        if (row.children) {
            for (var i = 0; i < row.children.length; i++) {
                if (row.children[i].ROWSTATE != 'DELETED') {
                    return {
                        group: true,
                        expanded: true,
                        children: row.children
                    };
                } 
            }
        } 
    },
    ...
};

这是低效的，因为它必须遍历所有子节点以检查是否所有子节点都被删除。但是，这是一种可行的解决方法。

不要忘记将组单元格渲染器添加到将负责子项扩展和收缩的列：

var columnDefs = [
    ...
    {
        headerName: ...
        cellRenderer: 'group'
    }
];

当然，这适用于任何框架，无论是纯 JavaScript 还是 Angular。

【讨论】：