65.9K
CodeProject 正在变化。 阅读更多。
Home

为您的 DataGrid 添加一些样式

Steven Campbell
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (28投票s)

2004年7月6日

CPOL

4分钟阅读

viewsIcon

261385

downloadIcon

4389

使用 CSS 样式表为所有网格应用可重复使用的样式。

Sample Image - cssgrid.gif

引言

为 .NET DataGrid 应用 CSS 样式可能会令人沮丧——试图盲目应用样式通常不会按预期工作，因为 `DataGrid` 在浏览器中的渲染方式。本文介绍了一些简单的技巧来帮助您入门。

但首先，为什么要使用样式？您可以使用 Visual Studio .NET 中的自动格式化功能，但当您的老板聘请的“UI 专家顾问”坚持要在行之间添加额外的间距时，会发生什么？您将不得不修改项目中的每个网格。使用样式可以从一个地方控制所有网格的外观。

DataGrid 样式

`DataGrid` 暴露了几个可以轻松分配样式的区域，使用 `CssStyle` 属性。它们是：

  • ``` - 这对应于 HTML `` 元素。您可以使用此样式设置网格的一些全局属性，例如背景颜色或边框。
  • ``` - 这控制标题行，但样式应用于 HTML ` 元素。有趣的是，ASP.NET 将表头单元格渲染为 `
    • ` 元素。
  • ``` - 应用于高亮显示的行。
  • ``` - 应用于页脚行，例如摘要行。
  • ``` - 应用于分页行。

    • 我不会在我的示例中使用所有这些样式，因为它们对于展示如何做到这一点不是必需的。

    ``

    在我的示例中，我这样设置了 `DataGrid`：

    <asp:datagrid id="DataGrid1" runat="server" CssClass="Grid">
    <HeaderStyle CssClass="GridHeader"></HeaderStyle>
    <ItemStyle CssClass="GridItem"></ItemStyle>
    <AlternatingItemStyle CssClass="GridAltItem"></AlternatingItemStyle>
</asp:datagrid>

    我将 `CssStyle` 设置为 `Grid` 应用于 `asp:datagrid` 元素，并将各种其他样式应用到其他网格样式元素。在我的外部样式表中，我使用了以下行，它创建了一个 1 像素厚的实心棕褐色边框。

    .Grid { border: solid 1px Tan; }

    为整个网格应用样式类还有其他好处——我们可以使用该类来引用网格的子元素，如下所示：

    .Grid td
{
    border: solid 3px #FFFFFF;
    margin: 3px 3px 3px 3px;
    font-family: Arial;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

    上面的样式应用于网格中的所有单元格，因为它们都是 `

    `，而不是 ``。坏心眼的微软，又在滥用 Web 标准了！
  • ``` - 这控制每个项目的格式。样式应用于奇数行的 HTML ` 元素。
  • ``` - 控制交替（偶数）项目的格式。也应用于 `
    • ` 元素。它使所有文本都成为 Arial 字体并且居中，创建了粗的白色网格线，并在单元格之间插入了一些内边距和间距。

    ``

    接下来，我们继续格式化标题行。使用应用于 `` 元素的 `GridHeader` 样式，这相当简单。

    .GridHeader
{
    font-weight: bold;
    background-color: Tan;
}

    这工作正常，直到您创建已排序的网格。已排序的网格的标题行有超链接标签。这些超链接不会采用已分配的样式。不过，我们可以解决这个问题。

    .GridHeader a
{
    text-decoration: none;
    color: LightGoldenrodYellow;
    padding: 0px 15px 0px 15px;
}

    上面的代码解决了超链接的颜色和样式。内边距不是必需的，但我用它来演示一些更高级的 CSS，这些 CSS 在以下块中实现：

    .GridHeader a:hover
{
    text-decoration: underline;
    background: Tan url(images/spin.gif) no-repeat 0 100%;
}

    `hover` 关键字用于表示鼠标悬停在链接上时会发生什么。在我的例子中，我正在为超链接添加下划线，并在其旁边显示一个小图像。（这就是为什么我之前创建了 15px 的内边距；这样图像就有了一个去处）。该图像是一个旋转按钮，希望它能向用户表明点击标题会做什么。

    ``, ``

    接下来，我们要设置网格行的某些属性。在我的例子中，我决定稍微减小行字体，以便在我的行中容纳更多数据。

    .GridItem, .GridAltItem
{
    font-size: smaller;
}

    注意我是如何将样式应用于普通行和交替行的。接下来，我们应用样式来区分交替行。

    .GridItem
{
    background-color: LightGoldenrodYellow;
}

.GridAltItem
{
    background-color: PaleGoldenrod;
}

    这样就完成了所有基本操作。

    最终注释

    这里使用的样式已在 IE6 和 Mozilla FireFox 0.91 中进行了测试。它们将优雅地降级在不支持某些更高级功能（如悬停旋转按钮）的浏览器上。

    可下载的代码包含多个样式表。在 FireFox 上，您可以使用左下角的小图标切换样式。在 IE 中，您必须编辑源代码才能查看其他样式。

    参考文献

    © . All rights reserved.