个人中心
gpt4 book ai didi

c# - 根据条件更改 GridMvc 列的背景

转载 作者：行者123 更新时间：2023-11-30 20:47:59 26 4
gpt4 key购买 nike

我在 asp.net mvc 项目中使用 Grid MVC。如果存在特定条件，我需要更改行的背景颜色，例如列名“Response”等于“ERROR”然后我需要将行颜色更改为红色

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>

最佳答案

为此有一个内置的服务器大小方法。 SetRowCssClasses() .

在 Index.cshtml 中，使用下面

@Html.Grid(Model).SetRowCssClasses(
    item => item.Response=="ERROR"? "cssClassRed" : string.Empty)
      .Columns(columns =>
    {

“cssClassRed”被注入(inject)满足条件的行。

<tr class="grid-row cssClassRed">

关于c# - 根据条件更改 GridMvc 列的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25257151/

26 4 0
文章推荐： c# - 如何在 linq 中连接具有多列的表？
文章推荐： javascript - 为什么我的代码不从 if 语句输出字符串？
文章推荐： javascript - 如何将来自 setInterval 的数据推送到数组中
文章推荐： C#线程访问if block ，其条件返回false
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com