本示例显示了如何动态生成前端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上是否能够编辑，以及子表支持，等等～～～，我就觉得很欣慰了。