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

发布时间：2020-12-16 06:38:02 所属栏目：asp.Net 来源：网络整理

导读：我使用WebGrid显示项目列表,列表中的某些项目被禁用,所以我想让它在网格中变暗,为此我必须将行类设置为在项目被禁用时变暗,我不知道如何根据条件设置行类这是我的示例代码 var grid = new WebGrid(Model,canPage: true,rowsPerPage: 20); @grid.GetHtml(tab

我使用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",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>,grid.Column("Details",@<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

解决方法

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

@{
        var grid = new WebGrid(Model,canSort: false,@<a href='../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png' alt='Edit' /></a>,@<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>,@<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

这是修改过的代码

grid.Column("Delete",

我在删除链接中添加了一个类“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");
            }
        });

注意：如果删除该项,则将该行显示为灰色

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!