在Asp.net MVC使用jqGrid--代码少点再少点

本示例显示了如何动态生成前端jqGrid代码，一般情况仅一行代码：

<%=Html.jqGrid<TestModel>(@"#jqT", "Test", "/Home/GridData/")%>

效果如下：

 

还不仅仅如此，利用MetaData，将自动对不同实体对象进行捆绑，自动生成Grid。

 

如果你想知道如何在asp.net MVC中使用jqGrid，请参考

http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx

看代码

1、 扩展HtmlHelper来输出一段Javascript到客户端。

 

代码

public   static   class  jqGridExtensions
    {
         public   static   string  jqGrid < T > ( this  HtmlHelper helper,  string  gridID,  string  caption,  string  url)
        {
             if  (gridID.Substring( 0 ,  1 )  !=   " # " )
                gridID  =   " # "   +  gridID;
             string  pagerID  =   string .Format( " {0}_pager " , gridID);
            StringBuilder sb  =   new  StringBuilder();

            sb.AppendLine( "  <script type=\ " text / javascript\ " >$(function(){ " ); // jQuery(document).ready(function() {
            sb.AppendLine( " $('%%GRIDID%%').jqGrid({ " .Replace( " %%GRIDID%% " , gridID));        // jQuery("#list").jqGrid({
            sb.AppendFormat( " url:'{0}', " , url);                             //         url: '/Home/GridData/',
            sb.Append( " datatype: 'json',mtype: 'GET', " );                  //         datatype: 'json',mtype: 'GET',
            sb.AppendFormat( " colNames:[{0}], " , GetColNames < T > ());

            sb.AppendFormat( " colModel:[{0}], " , GetColModel < T > ());
            sb.Append( " pager: '%%GRIDPAGERID%%',rowNum: 20,rowList: [10, 20, 50,100], " .Replace( " %%GRIDPAGERID%% " , pagerID));
            sb.AppendFormat( " sortname:'{0}',sortorder: 'desc', " , GetSortField < T > ());
            sb.Append( " viewrecords: true,imgpath: '/themes/redmond/images', " );
            sb.AppendFormat( " caption: '{0}' " , caption);
            sb.Append( " });\n$('%%GRIDID%%').jqGrid('navGrid','%%GRIDPAGERID%%',{ edit: false, add: false, del: false }); " .Replace( " %%GRIDID%% " , gridID).Replace( " %%GRIDPAGERID%% " , pagerID));
            sb.Append( " });</script>\n " );
            sb.AppendFormat( " <table id=\ " { 0 }\ "  class=\ " scroll\ "  cellpadding=\ " 0 \ "  cellspacing=\ " 0 \ " ></table> " , gridID.Substring( 1 ));
            sb.AppendFormat( " <div id=\ " { 0 }\ "  class=\ " scroll\ "  style=\ " text - align:center;\ " ></div> " , pagerID.Substring( 1 ));
            sb.AppendLine();
             return  sb.ToString();
        }
}

 

上述代码隐含了3个函数来取得排序字段，Grid的列标题及ColModel。

 

2、 对Grid的列标题及排序字段，ColModel进行定制。以GetColModel为例：

 

代码

  private   static   string  GetColModel < T > ()
        {
            ModelMetadata metadata  =  ModelMetadataProviders.Current.GetMetadataForType( null ,  typeof (T));

            StringBuilder sb  =   new  StringBuilder();
             int  width = 100 ;
             foreach  (ModelMetadata proMeta  in  metadata.Properties)
            {
                ColWidthAttribute colWidthAttr  =  GetCustomAttribute < ColWidthAttribute > (proMeta)  as  ColWidthAttribute;
                 if  (colWidthAttr  !=   null )
                    width  =  colWidthAttr.Width;
                sb.Append( " { " );
                sb.AppendFormat( " name:'{0}',index:'{0}',width:{1},align:'left' " , proMeta.PropertyName, width);
                sb.Append( " }, " );
            }
            sb.Remove(sb.Length  -   1 ,  1 );
             return  sb.ToString();
             // return "{ name: 'Id', index: 'Id', width: 140, align: 'left' }, { name: 'Votes', index: 'Votes', width: 180, align: 'left' },{ name: 'Title', index: 'Title', width: 400, align: 'left',editable:true}";
        }

         private   static   object  GetCustomAttribute < T > (ModelMetadata proMeta) 
        {
            PropertyInfo property  =  proMeta.ContainerType.GetProperty(proMeta.PropertyName);
             object [] propertyAttributes  =  property.GetCustomAttributes( typeof (T),  true );
             if  (propertyAttributes.Length  >   0 )
            {
                 return  (propertyAttributes[ 0 ]);

            }
            
             return   null ;
        }

 

 

3、 扩展一个列宽（Column Width）属性。

 

 

  public   class  ColWidthAttribute: Attribute
    {
         public  ColWidthAttribute()
        {

        }

         public   int  Width {  get ;  set ; }
    }

 

 

 

 

4、 如何定制实体对象。

 

代码

    [DisplayName( " ID " )] // 暂时用这个来表示排序字段
     public   class  TestModel
    {
        [DisplayName( " 编号 " )]
        [ColWidth(Width = 100 )]
         public   int  ID{ get ; set ;}

        [DisplayName( " 支持率 " )]
        [ColWidth(Width  =   120 )]
         public   int  Votes {  get ;  set ; }

        [DisplayName( " 议题 " )]
        [ColWidth(Width  =   300 )]
         public   string  Title {  get ;  set ; }

    }

 

 

 

5、 Controller中的代码。

 

代码

  public  ActionResult GridData( string  sidx,  string  sord,  int  page,  int  rows)
        {
            var jsonData  =   new
            {
                total  =   1 ,  //  we'll implement later 
                page  =  page,
                records  =   3 ,  //  implement later 
                rows  =   new []{
                       new  {id  =   1 , cell  =   new [] { " 1 " ,  " -7 " ,  " Is this a good question? " }},
                       new  {id  =   2 , cell  =   new [] { " 2 " ,  " 15 " ,  " Is this a blatant ripoff? " }},
                       new  {id  =   3 , cell  =   new [] { " 3 " ,  " 23 " ,  " Why is the sky blue? " }}
                }
            };
             return  Json(jsonData,JsonRequestBehavior.AllowGet);
        }

 

千万要记得JSon中设置JsonRequestBehavior.AllowGet，否则jqGrid中将只有表头没有数据。

6、 前端代码。

 

代码

<% @ Page Language = " C# "  MasterPageFile = " ~/Views/Shared/Site.Master "  Inherits = " System.Web.Mvc.ViewPage "   %>

< asp:Content  ID ="aboutTitle"  ContentPlaceHolderID ="TitleContent"  runat ="server" >
    About Us
</ asp:Content >

< asp:Content  ID ="aboutContent"  ContentPlaceHolderID ="MainContent"  runat ="server" >
     < h2 > About </ h2 >
     < p >
        Put content here.
     </ p >
     < div >
    
     <% = Html.jqGrid < TestModel > (@ " #jqT " ,  " Test " ,  " /Home/GridData/ " ) %>
     </ div >
</ asp:Content >

 

看完，也许你会说这还叫代码少一点，我只是觉得这篇文章可能浪费你的时间。

看完，也许你觉得这个例子威力太小，还想要能够自动支持在jqGrid上是否能够编辑，以及子表支持，等等～～～，我就觉得很欣慰了。