ASP.NET MVC 3 WebGrid排序順序圖像

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

我只是做「的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 2

我使用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); 

這是輔助類代碼：

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 3

這個頁面有一個如何實現排序箭頭或圖像一個很簡單的例子，它使用AJAX的的WebGrid時。

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