asp.net-mvc - 如何设置 webgrid 行样式内联

Question

我正在使用WebGrid来显示项目列表，列表中的某些项目被禁用，所以我想将其在网格中变暗，为此我必须设置行如果该项目被禁用，类将变暗，我不知道如何根据条件设置行类

这是我的示例代码

  var grid = new WebGrid(Model, canPage: true, rowsPerPage: 20);
                @grid.GetHtml(tableStyle: "grid",
                                rowStyle: "gridrow",
                                alternatingRowStyle: "gridrow_alternate",
                                mode: WebGridPagerModes.All,
                                numericLinksCount: 10,
                                columns: grid.Columns(
                                    grid.Column("Name", "Name", item => (item.LocationData[0].Name), canSort: true, style: "width:60%"),
                                    grid.Column("Url", "Url", canSort: true, style: "width:60%"),
                                    grid.Column("Edit", "", @<a href='../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png'
                                        alt='Edit' />
                                    </a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='#' id='Delete' itemId='@item.ID' title='@item.LocationData[0].Name'><img
                                        src='/content/icons/delete.png' alt='Delete' />
                                    </a>, style: "width:150px"),
                                    grid.Column("Details", "", @<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

Answer 1

我使用 JQuery 找到了此问题的解决方案，我为网格列内部 HTML 添加了 CSS 类属性这是之前添加属性的代码

<小时/>

 @{
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 20);
                @grid.GetHtml(tableStyle: "grid",
                                rowStyle: "gridrow",
                                alternatingRowStyle: "gridrow_alternate",
                                mode: WebGridPagerModes.All,
                                numericLinksCount: 10,
                                columns: grid.Columns(
                                    grid.Column("Name", "Name", item => (item.LocationData[0].Name), canSort: true, style: "width:60%"),
                                    grid.Column("Url", "Url", canSort: false, style: "width:60%"),
                                    grid.Column("Edit", "", @<a href='../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png' alt='Edit' /></a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='#' id='Delete' class="temp" removed="@item.Removed" itemId='@item.ID' title='@item.LocationData[0].Name'><img src='/content/icons/delete.png' alt='Delete'  /></a>, style: "width:150px"),
                                    grid.Column("Details", "", @<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

<小时/>

这是修改后的代码

  grid.Column("Delete", "", @<a href='#' id='Delete' class="temp" removed="@item.Removed" itemId='@item.ID' title='@item.LocationData[0].Name'><img src='/content/icons/delete.png' alt='Delete'  /></a>, style: "width:150px"),

我向删除链接添加了一个“temp”类，还添加了一个具有条件值的属性“removed”，并且添加了以下 JQuery 代码

 $(".temp").each(function (index, element) {
            if (($(element).attr("removed")) == "False") {
                $(element).parent().parent().attr("class", "deleted");

                $(element).find("img").attr("src", "../../content/icons/deleted.png");
            }
        });

注意:如果该项目被删除，则该行显示为灰色