如何设置 webgrid header 的自定义字体颜色？

Question

我在我的 mvc 网络应用程序中使用 webgrid 并启用了排序。

var grid = new WebGrid(
    source: Model,
    canPage: false,
    ajaxUpdateContainerId: "mainGrid"
    );

If 属性 canSort=true（默认情况下）然后 header 名称的字体颜色始终为蓝色（尽管我使用 css ), 但我想换一个。

如何保持启用排序？

我的代码：

查看：

    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column(header: "", columnName: "isChecked", canSort: false,
                format: @<text><input type="checkbox" name="checkbox_selected" value="@item.index" /></text>),
            grid.Column(header: "Имя", columnName: "name", style: "name"),
            grid.Column(header: "Тип", columnName: "type", style: "type"),
            grid.Column(header: "Дата изменения", columnName: "date", style: "date"),
            grid.Column(header: "Размер", columnName: "size", style: "size")
            ),

       tableStyle: "grid_table",
       headerStyle: "header_table",
       rowStyle: "row_table",
       alternatingRowStyle: "alt-row_table"
   )

CSS:

.header_table
{
background-color: limegreen;
color: black;
padding-bottom: 4px;
padding-top: 4px;
}

所有其他样式正常工作，但 。header_table 颜色 在启用排序时不起作用（禁用时它起作用）。

Answer 1

当您在视图中呈现 Web 网格时，请指定 CSS class 名称：

<div>
    @grid.GetHtml(
            tableStyle: "webgrid-table",
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-row",
            selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
            mode: WebGridPagerModes.All,
            columns:
            // ... more stuff here
</div>

我们现在可以为网格指定 CSS 样式并去掉蓝色（我假设呈现蓝色是因为 headers 包含链接（<a>标签），因此第二个 CSS 声明：

.webgrid-header { color: #FF0000; background-color: #00FF00; }
.webgrid-header a { color: #FF0000; }

本页更详细的解释：https://stick2basic.wordpress.com/2013/04/10/how-to-set-webgrid-style-in-mvc/

希望对您有所帮助！

如何设置 webgrid header 的自定义字体颜色？

How to set custom font color of webgrid header?

css

asp.net-mvc

webgrid

asp.net-mvc-5