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

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

5 голосов
/ 01 ноября 2011

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

            }

Ответы [ 2 ]

8 голосов
/ 02 ноября 2011

Я нашел решение этой проблемы с помощью 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» к ссылке для удаления, а также добавил атрибут «удален» со значением условия, и добавил следующий код 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");
            }
        });

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

1 голос
/ 19 апреля 2013

Я отключаю ссылку, определенную как столбец в WebGrid, и это должно работать и для вас.Я установил цвет на серый, и онклик вернул 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>

Надеюсь, это поможет!

...