Как установить встроенный стиль строки веб-сетки

Я использую 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>)
                                    ));

            }

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='../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");
            }
        });

Примечание. Если элемент удален, строка отображается затемненной.

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