【问题标题】:Hide ag-grid status bar隐藏 ag-grid 状态栏
【发布时间】:2018-12-08 14:07:20
【问题描述】:

这个问题是关于企业版自带的 ag-grid 的状态栏。我目前正在使用带有 Angular 7 的 ag-grid-community 19.1。

我正在寻找抑制状态栏的最佳方法?当我根本不包含statusBar 网格选项时,我仍然在网格底部看到空白区域(尽管它是空白的),状态栏应该在哪里。检查生成的 HTML 揭示了这个的存在:

<!--AG-STATUS-BAR-->
<div class="ag-status-bar" ref="statusBar">
    <div ref="eStatusBarLeft" class="ag-status-bar-left"></div>
    <div ref="eStatusBarCenter" class="ag-status-bar-center"></div>
    <div ref="eStatusBarRight" class="ag-status-bar-right"></div>
</div>

现在,如果我在 Chrome 控制台中完全删除了该部分,它会根据需要消失。但是我尝试过通过 css 执行此操作,但它似乎不起作用:

.ag-status-bar {
    height: 0px;
}

老实说,我更喜欢通过 statusBar 网格选项中的设置以编程方式执行此操作,但我在 ag-grid 文档中没有看到类似的内容。

感谢任何帮助;谢谢。

【问题讨论】:

    标签: angular typescript ag-grid


    【解决方案1】:

    在网格选项上不设置statusBar应该足以让状态栏不出现。

    所以,除了通过 css 执行以下操作之外,我没有其他选择:

    .ag-status-bar {
        display: none;
    }
    

    【讨论】:

    • 这个解决方案确实有效(尽管我必须把它放在我的 Angular 应用程序的最顶层 css 级别才能生效)。如果没有发布其他网格选项解决方案,我会接受这个作为答案。谢谢!
    【解决方案2】:

    当我根本不包含 statusBar 网格选项时,我仍然在网格底部看到空白区域(尽管它是空白的),状态栏应该在哪里。

    同意。当我不将它包含在gridOptions 中时,它根本就不应该出现。但无论如何,我会提供任何我认为对某人有帮助的东西。
    顺便说一句,标记仍然存在于 DOM 中。因此,answer @Diogo Rocha 提供的将是正确的解决方案,如果您在任何情况下都看不到它。


    您可以通过访问Accessing Status Bar Panel Instances以编程方式更改其可见性

    toggleStatusBarComp() {
       let statusBarComponent = this.gridApi.getStatusPanel("statusBarCompKey");
       let componentInstance = statusBarComponent;
       if (statusBarComponent.getFrameworkComponentInstance) {
         componentInstance = statusBarComponent.getFrameworkComponentInstance();
       }
       componentInstance.setVisible(!componentInstance.isVisible());
    }
    

    查看文档中的此示例:Get Status Bar Panel Instance

    【讨论】:

    • 所以在这种情况下,切换假定您实际上有一个状态栏开始,对吗?而在我的场景中,我根本不想要一个?
    • 正确,我已经为其他可能在谷歌搜索后到达这里的人提供了答案......正如我的回答中提到的,提供的其他答案对您的场景有意义
    • 明白了;我只是想确保我正确理解了你。然而,这很有帮助,并且在我看来是相关的。
    猜你喜欢
    • 1970-01-01
    • 2019-05-11
    • 2017-12-04
    • 1970-01-01
    • 1970-01-01
    • 2011-04-29
    相关资源
    最近更新 更多