如何隐藏网格标题剑道ui？

Posted 2023-05-07

【中文标题】如何隐藏网格标题剑道ui？

【英文标题】：How to hide the grid header kendo ui?

【发布时间】：2014-08-01 20:04:17

【问题描述】：

我正在使用层次网格剑道 ui。我想隐藏网格标题。目前，我使用如下代码，但是，只隐藏标题的文本。

// kendo ui grid
.TablehtmlAttributes(new  @class = "GridNoHeader" )

// css
.GridNoHeader thead.k-grid-header

    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;

如果可以，请分享您的经验。 谢谢

【参考方案1】：

这是一个 jQuery 方法，您可以在网格初始化后立即运行：

$("#grid .k-grid-header").css('display', 'none');

它隐藏了整个页眉，比 css 解决方案稍微好一点，因为它将样式作为内联样式直接应用于页眉，这意味着该样式自动比所有其他剑道样式具有更高的优先级。

---

关于您当前的方式，它仅隐藏文本，因为visibility:hidden 将隐藏元素，但仍为其分配空间。试试display:none。此外，k-grid-header 类应用于包含整个标题的div 元素，而不是thead。也许试试这个：

.GridNoHeader div.k-grid-header

    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;

【讨论】：

在网格函数中（例如DataBound）你也可以使用$(this.thead).css('display', 'none');

【参考方案2】：

要隐藏网格标题，请使用以下代码：

.GridNoHeader .k-grid-header

    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;

【参考方案3】：

就我而言，解决方案“display: none;”中缺少 1 个样式属性

此示例留下一个没有标题列名称的空标题行：

.GridNoHeader thead.k-grid-header

    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;

这将完全删除标题行：

.GridNoHeader thead.k-grid-header

    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;