在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 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为例:
{
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 ColWidthAttribute()
{
}
public int Width { get; set; }
}
4、 如何定制实体对象。
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中的代码。
{
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、 前端代码。
<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上是否能够编辑,以及子表支持,等等~~~,我就觉得很欣慰了。
转载于:https://www.cnblogs.com/PM_2004/archive/2010/02/25/1673722.html
在Asp.net MVC使用jqGrid--代码少点再少点相关推荐
- asp.net mvc 压缩html代码,浅谈ASP.NET中MVC 4 的JS/CSS打包压缩功能
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...
- asp.net mvc 微信支付代码分析(根据沐雪微信平台3.1商城业务来分析)
开发微信应用,微信支付是永远要面对的.现在的微信支付相对以往已经很稳定,很少出现诡异情况.再加上无数人开发的经验分享,现在开发微信支付已经没什么难度了. 我这次主要是想基于沐雪微信平台的微商城业务来分 ...
- ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据
上回说到jqgrid的基本配置,同时演示了显示数据的一种方法--datatype: "local".这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. ...
- 史上最全的ASP.NET MVC路由配置,以后RouteConfig再弄不懂神仙都难救你啦~
https://www.cnblogs.com/zeusro/p/RouteConfig.html 转载于:https://www.cnblogs.com/zquan/p/9768212.html
- 《从零开始学习ASP.NET MVC 1.0》-开天辟地入门篇
<从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...
- 从零开始学习ASP.NET MVC 入门
<从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...
- asp.net mvc 点滴 一 asp.net mvc vs asp.net web forms
MVC模式是一个大家很熟悉的设计模式,微软的asp.net mvc framework是给asp.net web forms提供了一个可替换的asp.net方案. Models:Model对象是程序的 ...
- Response.End()在Webform和ASP.NET MVC下的表现差异
前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页...
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
最新文章
- 双目立体视觉 I:标定和校正
- jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
- 7-20(排序) 奥运排行榜(25 分)
- GDCM:gdcm::StreamImageWriter的测试程序
- 哪里的mysql性能监控_mysql性能监控工具Innotop简介及配置
- 一次惊险的javascript经历,汗,现在想想都后怕
- 57 SD配置-科目分配-定义客户账户分配组
- 实时控制软件设计第二周作业-停车场门禁控制系统状态机设计
- 年底购物狂欢,移动支付安全不容忽视
- 读取内存数据,大航海家3的编辑器的一点思路
- 连连看.NET v1.2版下载
- 2021年老杨通信工程师中级互联网技术视频讲解
- 推动数据开放共享,释放数字经济创新活力
- 数据库身份证号用什么类型_《PHP和MySQL Web 开发》第8章 设计Web数据库
- 两种异步时钟同步化区别分析
- 记录自己关于Linux的学习和RHCSA、RHCE认证相关
- C#学习之Spilt用法
- R 语言的表格合并(实际运用)
- 毕业答辩PPT模板(10套免费+精选)
- MYSQL数据库导出和备份----mysqldump
热门文章
- (组合数求模=乘法逆元+快速幂) Problem Makes Problem
- server sql 水平分表_springboot集成Shardingsphere进行分库分表
- cp命令显示进度条_干货|| Linux常用命令大全
- nfc sim android8,Android NFC相关资料之MifareClassic卡(读写)
- sql server 2008表中计算机,电脑删除SQLsever2008表格数据出现“不能删除”怎么办
- 大学计算机一级b笔记,全国计算机等级一级B Excel考试整理笔记
- html支持的脚本语言,能不能让日志内容在支持html语言的同时支持一下脚本语言,拜托!拜托!...
- Java访问控制修饰符详解
- 【OpenCV 例程200篇】96. 谐波平均滤波器
- Mac下配置sublime实现LaTeX