【问题标题】:Hiding or Removing the contracted icon [+] for rowGroup based on condition in ag-grid根据 ag-grid 中的条件隐藏或删除 rowGroup 的收缩图标 [+]
【发布时间】:2018-09-18 19:31:45
【问题描述】:

我们使用的是 ag-grid-enterprise 13.1.0。

我们有父行和子行(单击父行上的加号“+”即可展开)。

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

您能否告诉我们这是否可行或任何其他合适的解决方案。

【问题讨论】:

    标签: ag-grid-react


    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-25
      • 1970-01-01
      • 2022-01-23
      • 2020-12-14
      • 2017-12-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多