Как да зададете вграден стил на ред в мрежата

Използвам 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='/bg../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png'
                                        alt='Edit' />
                                    </a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='/bg#' 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="/bg../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

asp.net-mvc asp.net-mvc-3 webgrid
person Yasser-Farag    schedule 01.11.2011    source източник

Отговори (2)


arrow_upward
8
arrow_downward

Намерих решение за този проблем с помощта на JQuery, добавих атрибут на CSS клас за колона с мрежа, вътрешен HTML Това е предишният код с добавен атрибут

 @{
        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='/bg../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png' alt='Edit' /></a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='/bg#' 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="/bg../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

Това е модифицираният код

  grid.Column("Delete", "", @<a href='/bg#' 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");
            }
        });

Забележка: ако елементът е премахнат, редът се показва като затъмнен

person Yasser-Farag    schedule 02.11.2011

arrow_upward
1
arrow_downward

Деактивирам връзка, дефинирана като колона в WebGrid и това трябва да работи и за вас. Зададох цвета на сиво и onclick да върне false, когато условието е деактивирано. В противен случай цветът е черен и onclick връща true по следния начин:

@{
    bool enableLink = false;
    var link = "false";
    var color = "grey";
    if (enableLink) { link="true"; color="black"; }         
}

            <div>@grid.GetHtml( tableStyle: "grid",
              headerStyle: "head",
              alternatingRowStyle: "alt",
              columns: grid.Columns(                
              grid.Column(format: @<a href="http://www.whereverYouLinkTo.com" style="color:@color" onclick="return @link">Edit</a>), 
              grid.Column("FirstName", header:"First"),
              grid.Column("LastName", header:"Last")))

</div>

Надявам се това да помогне!

person Thomas Fonseca    schedule 19.04.2013