ag-grid-react - 根据 ag-grid 中的条件隐藏或删除 rowGroup 的收缩图标 [+]

Question

我们正在使用 ag-grid-enterprise 13.1.0。

我们有父行和子行（通过单击父行上的加号“+”来展开）。

我们当子行没有数据时，它们显示为空行。在这种情况下，我想隐藏/删除 + 图标，这样用户就不会展开看到空的子行。

您能否让我们知道这是否可能或任何其他合适的解决方案。

Answer 1

我已经使用 rowClassRules 属性实现了这一点。下面是一段代码：

rowClassRules = {
        "manualExpand": function(params) {
          if(params.node.field === 'outageName' && params.node.expanded === false) {
            var expandFlag = checkForEmptySevone(params.node)
            return expandFlag;
          }
        },

        "expandAll": function(params) {
          if (params.node.field === 'outageName' && params.node.expanded === true) {
            var expandAllFlag = checkForEmptySevone(params.node)
            return expandAllFlag;
          }
        }
      },

      checkForEmptySevone = (node) => {
        var rowData = node.childrenAfterGroup[0].data;
        if(rowData.get('SEVONE_ID') === ' ' || rowData.get('SEVONE_ID') === '' || 
          rowData.get('SEVONE_ID') === undefined || rowData.get('SEVONE_ID') === null) {
          return true
        } else {
          return false
        }
      }

**Below is the css:**
.manualExpand  .ag-icon-expanded {
    display: none !important;
}

.manualExpand  .ag-group-value {
    padding-left: 16px !important;
}

.manualExpand  .ag-icon-contracted {
    display: none !important;
}

.expandAll  .ag-icon-expanded {
    display: none !important;
}

.expandAll  .ag-group-value {
    padding-left: 16px !important;
}

.expandAll  .ag-icon-contracted {
    display: none !important;
}

.expandAll + div {
    background-color: black;
    display: none ! important;
}