Question

我正在使用WebGrid，我想在标题中显示一个像“^”“v”的图像或字符，显示带有排序顺序的列。

我该怎么做？

这是我的一个Webgrids的代码：

<div id="contenedor-gridACTIVIDAD">

    @{    
        WebGrid gridACTIVIDAD = new WebGrid(Model.actividadDiaria, ajaxUpdateContainerId: "contenedor-gridACTIVIDAD", rowsPerPage: 20);



    }
    @gridACTIVIDAD.GetHtml(


                 fillEmptyRows: true,
                 alternatingRowStyle: "fila-alternativa",
                 headerStyle: "encabezado-grid",
                 footerStyle: "pie-grid",
                 mode: WebGridPagerModes.All,
                 firstText: "<<",
                 previousText: "<",
                 nextText: ">",
                 lastText: ">>",





         columns: new[]     {
                            gridACTIVIDAD.Column("contrato", header: "Contrato"),                            
                            gridACTIVIDAD.Column("Observacion", header: "Observación"),
                            gridACTIVIDAD.Column("DESCR", header: "Tarea"),                            
                            gridACTIVIDAD.Column("FECHA", header: "Fecha",
                            format: (item) =>
                                {
                                    return item.fecha.ToString("dd/MM/yyyy");
                                }

                            ),
                            gridACTIVIDAD.Column("", 
                            header: "ESTADO",                            
                            format: (item) =>
                            {                                                
                                if (item.estado == "VC")
                                {
                                    return Html.Image("/Imagenes/vc.gif","Validado correcto", new { @border = "0"});
                                }
                                else if (item.estado == "VI")
                                {
                                    return Html.Image("/Imagenes/vi.gif", "Validado incorrecto", new { @border = "0" });
                                }
                                else if (item.estado == "NV")
                                {
                                    return Html.Image("/Imagenes/vp.gif", "No validado", new { @border = "0" });
                                }
                                else
                                {
                                    return Html.Image("/Imagenes/nv.png", "Pendiente validar", new { @border = "0" });
                                }

                            }                           
                            ),
                            gridACTIVIDAD.Column("JDP", header: "JDP")

                            }


                        )

</div>

Answer 1

我使用HTMLAgilityPack在服务器端解决了这个问题。

这是视图的代码：

WebGrid webGrid = new WebGrid(Model.myModel, defaultSort: "title", rowsPerPage: 20);
IHtmlString webGridHtml = webGrid.GetHtml(
                columns: webGrid.Columns(
                    webGrid.Column("id", "ID"),
                    webGrid.Column("title", "Title")
                )
            );
@Helper.GetExtendedWebGrid(webGrid, webGridHtml);

这是Helper类的代码：

    public static IHtmlString GetExtendedWebGrid(WebGrid webGrid, IHtmlString webGridHtml)
    {
        HtmlString result;

        string webGridHtmlString = webGridHtml.ToString();

        HtmlDocument htmlDocument = new HtmlDocument();

        htmlDocument.LoadHtml(webGridHtmlString);
        HtmlNode htmlNodeAnchor = htmlDocument.DocumentNode.SelectSingleNode("//a[contains(@href,'" + webGrid.SortColumn + "')]");
        if (htmlNodeAnchor != null)
        {
            string imgSortDirection;
            if (webGrid.SortDirection == SortDirection.Ascending)
                imgSortDirection = "asc";
            else
                imgSortDirection = "desc";
            HtmlNode htmlNodeIcon = HtmlNode.CreateNode("<img src=\"/images/" + imgSortDirection + ".png\" width=\"10\" height=\"10\" />");

            htmlNodeAnchor.ParentNode.AppendChild(htmlNodeIcon);

            webGridHtmlString = htmlDocument.DocumentNode.OuterHtml;
        }

        result = new HtmlString(webGridHtmlString);

        return result;
    }

Answer 2

我刚刚对“webgrid排序指标”进行了谷歌搜索，然后回来了http://prokofyev.blogspot.com/2011/01/sort-indicator-in-systemwebhelperswebgr.html

的结果

基本上，此人使用jQuery添加排序方向图像。

<script type="text/javascript">
    $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent()
    .append('@(grid.SortDirection == SortDirection.Ascending ? "U" : "D")');
</script>

（作为一个额外的奖励，我只是自己测试，所以你可以复制并粘贴这段代码（链接一个是图片而不是代码样本:( ...）只需用你的任何东西替换U和D想改为显示。

希望有所帮助。

Answer 3

当使用带有AJAX的WebGrid时，此页面有一个非常简单的示例，说明如何实现排序箭头或图像。

http://www.mikesdotnetting.com/Article/203/Enhancing-The-WebGrid-With-Sort-Arrows

ASP.NET MVC 3 WebGrid排序顺序图像

3 个答案: