根据条件更改 GridMvc 列的背景
Posted
技术标签:
【中文标题】根据条件更改 GridMvc 列的背景【英文标题】：Changing Background of GridMvc Column on Condition 【发布时间】：2014-10-05 02:24:38 【问题描述】：我在 asp.net mvc 项目中使用 Grid MVC。如果存在某些条件，我需要更改行的背景颜色，例如列名“响应”等于“错误”然后我需要将行颜色更改为红色
Index.cshtml
@model IEnumerable<Grid.Models.Client>
@using GridMvc.html
@
Layout = null;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
<title>Index</title>
</head>
@using (Html.BeginForm("Search", "Client"))
<body style="margin:30px">
<br />
<table>
<tr>
<td>
<h4> Search Criteria:</h4>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<p>Reference :</p>
<input type="text" name="ref" style="width:120px" />
</td>
<td>
<p>Date :</p>
<input type="date" name="date" style="width:150px" />
</td>
<td>
<p>Time :</p>
<input type="time" name="time" style="width:120px" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<input type="submit" style="width:60px" value="Search" />
</td>
</tr>
</table>
<br />
<div style="width:800px;">
@Html.Grid(Model).Columns(columns =>
columns.Add(c => c.Type).Titled("Type").Filterable(true);
columns.Add(c => c.Description).Titled("Description");
columns.Add(c => c.DateTime).Titled("DateTime");
columns.Add(c => c.Reference).Titled("Reference");
columns.Add(c => c.Response).Titled("Response");
).WithPaging(10).Sortable(true)
</div>
_Grid.cshtml
@using GridMvc.Columns
@model GridMvc.IGrid
@if (Model == null) return;
@
var gridClinetId = "grid-mvc-" + (string.IsNullOrEmpty(Model.Id) ? Guid.NewGuid().ToString() : Model.Id);
<div id="@gridClinetId" class="grid-outer @(Model.EnablePaging ? "paged" : string.Empty)">
@* Draw grid top items infomation panel *@
<div class="grid-wrap">
<table class="table table-striped grid-table" data-lang="@Model.Language">
@* Draw grid header *@
<thead>
<tr>
@foreach (IGridColumn column in Model.Columns)
@Html.Raw(column.HeaderRenderer.Render(column, column.Title))
</tr>
</thead>
<tbody>
@if (Model.ItemsCount == 0)
<tr class="grid-empty-text">
<td colspan="@Model.Columns.Count()">
@Model.EmptyGridText
</td>
</tr>
else
foreach (object item in Model.ItemsToDisplay)
<tr class="grid-row @Model.GetRowCssClasses(item)">
@foreach (IGridColumn column in Model.Columns)
@Html.Raw(column.CellRenderer.Render(column, column.GetCell(item).ToString()))
</tr>
</tbody>
</table>
@if (Model.EnablePaging && Model.Pager != null && Model.Pager.PageCount > 1)
<div class="grid-footer">
<div class="grid-footer-info">
Displaying items @(((Model.Pager.CurrentPage - 1) * Model.Pager.PageSize) + 1)
- @(((Model.Pager.CurrentPage - 1) * Model.Pager.PageSize) + Model.DisplayingItemsCount)
(@Model.ItemsCount)
</div>
@Html.Partial("_GridPager", Model.Pager)
</div>
@* Draw pager *@
</div>
</div>
@* Init Grid.Mvc client script *@
<script>
if (typeof (jQuery) != 'undefined' && typeof (jQuery.fn.gridmvc) != 'undefined')
var grid = $("#@gridClinetId").gridmvc();
window.gridMvcControl = grid;//when using only 1 grid on the page
@if (!string.IsNullOrEmpty(Model.Id))
<text>if (typeof (window.pageGrids) == 'undefined') window.pageGrids = ; window.pageGrids['@Model.Id'] = grid;</text>
</script>
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
【问题讨论】：
【参考方案1】：为此有一个内置的服务器大小方法。 SetRowCssClasses()。
在Index.cshtml中，在下面使用
@Html.Grid(Model).SetRowCssClasses(
item => item.Response=="ERROR"? "cssClassRed" : string.Empty)
.Columns(columns =>
“cssClassRed”被注入到满足条件的行中。
<tr class="grid-row cssClassRed">
【讨论】：
【参考方案2】：在我的情况下，只需添加您想要条件颜色的列：
columns.Add(p => p.DifferenceQty).Encoded(false).Sanitized(false).RenderValueAs(p => RenderCustomCSS(p.LogicQty, p.RealQty)).Titled("Cantidad total").SetWidth(70).Sortable(true).Filterable(true);
并创建一个帮助器来设置自定义渲染值（在同一视图中）
@helper RenderCustomCSS(double Value, double ValueCompared)
<p class="@(Value !=ValueCompared ? "gridDangerCell" : "")">@Value</p>
在css中：
.gridDangerCell
color: red;
【讨论】：
【参考方案3】：尝试以下方法：
$('.grid-table tr td:nth-child(4)').filter(function()
return $(this).text().indexOf('ERROR') != -1;
).closest('tr').css("backgroundColor", "red");
【讨论】：
我在 _Grid.cshtml 中尝试了上述函数，但没有任何反应。 你把它放在一个 jQuery 就绪事件中了吗？jQuery(function() //code here );
我把上面的脚本代码放在页面_Grid.cshtml里面
我遇到了问题，我认为 .text().indexOf('ERROR') != -1;以上是关于根据条件更改 GridMvc 列的背景的主要内容，如果未能解决你的问题，请参考以下文章