Question

我是MVC的新手，请指导我。我需要根据条件更改webgrid行的文本颜色。如上所述，我是MVC的新手，所以我不知道从哪里开始处理这个问题。

以下是视图

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
ViewBag.Title = "Home Page";
WebGrid grid = new WebGrid(Model);
}


<div>
@grid.GetHtml(
    tableStyle:"GridTable",
    headerStyle :"GridHeader",
    footerStyle :"GridFooter",
    alternatingRowStyle :"GridAlterRow",
    rowStyle:"gridRow",        

    columns:grid.Columns(
    grid.Column("Id","Emp Id"),
    grid.Column("Name","Name"),
    grid.Column("Age","Age"),
    grid.Column("Designation","Title"),
    grid.Column("Gender","Gender")
))

</div>

在模型中声明属性。在控制器中，我传递了Employee List对象来查看

输出以这种方式出现

Emp Id   Name           Age   Designation   Gender
1        Anurag         24    SE             Male
2        Mike           31    Lead           Male
3        George         41    GPM            Male

现在我想根据这个条件突出显示Age的背景颜色。如果年龄在20到30之间，背景颜色应为绿色。如果年龄在30到40之间，背景颜色应为黄色。如果年龄介于40以上，则该单元格的背景颜色应为红色。

Answer 1

尝试将此权限放在@ grid.Html（）

下

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $('tr').each(function (index) { //iterate over all table rows
        if (index > 0) {     //skip header
            if ($(this).children('td:nth-child(3)').text() < 31)  //look for the 3rd td in each row. thats where your age is.
            {
                $(this).children('td:nth-child(3)').css("background-color","green");
            }
            else if ($(this).children('td:nth-child(3)').text() < 41)
            {
                $(this).children('td:nth-child(3)').css("background-color", "yellow");
            }
            else 
            {
                $(this).children('td:nth-child(3)').css("background-color", "red");
            }
        }
    });
</script>

因为webgrid只生成一个html-table

如何根据某些条件更改MVC webgrid行文本的颜色

1 个答案: