Webgrid MVC 3 条件行样式答案

【问题标题】：Webgrid MVC 3 conditional row styleWebgrid MVC 3 条件行样式
【发布时间】：2012-09-11 10:35:31
【问题描述】：

我正在使用 WebGrid 来显示项目列表，

我喜欢根据条件设置行的背景颜色。我想设置整行的背景色，而不仅仅是一个单元格。

有什么例子吗？

谢谢

【问题讨论】：

【解决方案1】：

jQuery 是一种选择吗？如果是这样，请查看：http://devpinoy.org/blogs/keithrull/archive/2010/06/09/how-to-change-table-cell-color-depending-on-its-value-using-jquery.aspx

【讨论】：

【解决方案2】：

这是一个老问题，但我只是偶然发现了它并有一个我认为不太老套的答案。仅当您用于有条件地更改背景颜色的值是表格单元格的值时，提供的上一个答案才有效。

如果不是这样，您可以使用 WebGridColumn 的 Format 属性为表格行中的第一个单元格设置 data- 属性。在这里，我的表的第一列包含超链接 ID。我在我的代码隐藏（MVC 中的控制器操作）中定义它，并且我从我的对象的IsInError 属性中添加了一个data-in-error 属性。您可以通过对您的应用程序有意义的任何方式设置此属性的值。

new WebGridColumn 
{ 
    ColumnName = "Id", 
    Header = "ID", 
    Format = (x) => new HtmlString(String.Format("<a href=\"#\" data-in-error=\"{0}\">{1}</a>", x.Value.IsInError, x.Value.Id))
});

然后，使用 jQuery，我找到表中所有在行的第一个单元格中具有锚点的行，并将该行的类设置为“错误”。

$(document).ready(function () {
    $('table tbody tr td:first-child a[data-in-error="True"]').each(function () {
        $(this).parent().parent().addClass('error');
    });
});

希望这会有所帮助。

【讨论】：