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

【问题标题】：How to hide the grid header kendo ui?如何隐藏网格标题剑道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;
}

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

【问题讨论】：

标签： jquery css kendo-ui kendo-grid

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

【讨论】：