Comment définir webgrid ligne style inline

Je suis à l'aide d'un WebGrid pour afficher une Liste d'Éléments, certains éléments de la liste sont désactivés, donc je voudrais le faire en grisé dans la grille, pour ce faire je dois définir la ligne de la classe en grisé si l'élément est désactivé, je ne sais pas comment définir la ligne de classe selon une condition

C'est mon exemple de code

  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>)
                                    ));

            }

OriginalL'auteur Yasser-Farag | 2011-11-01

J'ai trouvé une solution pour ce problème à l'aide de JQuery, j'ai ajouté une classe CSS attribut pour une colonne de grille intérieure HTML
C'est le Code précédent avec l'ajout de l'attribut

 @{
        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>)
                                    ));

            }

C'est le code modifié

  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"),

J'ai ajouté une catégorie "temp" pour le lien supprimer et ajouter un attribut "supprimé" a la valeur de la condition, et j'ai ajouté à la suite de JQuery code

 $(".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");
            }
        });

Remarque: si l'élément est supprimé puis affiche la ligne en grisé

Belle solution!

OriginalL'auteur Yasser-Farag

Je suis la désactivation d'un lien défini comme une colonne dans une WebGrid et cela devrait fonctionner pour vous aussi. J'ai mis de la couleur au gris et le onclick de fausse déclaration lors de l'état est désactivé. Sinon la couleur est noir et onclick retourne true comme ceci:

@{
    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>

J'espère que cela aide!

OriginalL'auteur Thomas Fonseca

Vous devez vous connecter pour publier un commentaire.