关于 ASP.net + JQuery + JQGrid + JSON.net 的简单应用(一)
(LIVE WRITER有点问题,发布的顺序都乱了)
之前有朋友在他公司要用到JQ的插件JQGRID合并asp.net,但是他遇到问题,载入不了数据,于是我在网上到处找没找到一个可以用的asp.net例子,于是参考了几个PHP和几个JAVA的实现,给大家简单的介绍下如何在asp.net里使用这个插件:
因为我不会PHP,官方的demo其实介绍的还是比较详细的.
所以PHP高手们可以不要看这篇文章了.
参考了很多文章和JAVA的应用,找到零星的asp.net的例子,要么就是用不了,要么就是非常复杂,让人不知道从哪里下手,的确,走了很多弯路了,实在是麻烦,都想放弃这个插件了,不过还是努力坚持,决定了一旦例子成功就要贴上来给大家,方便别人就是方便自己.废话不多说了,下面正式开始介绍:
因为一个完整的项目全部拿来解释,还是过于繁琐了,所以就拆出其中的部分,其中不清楚的类会稍作解释,大家不明白的地方可以留言,总共就是三个文件:
Default.aspx (前端文件)
Handler.ashx (处理文件)
SQLComment.cs(操作SQL里comment表的类)
这里的主要目的还是为了能够实现数据导入进JQGRID,更复杂的操作今后会谈到.
1.客户端的准备
因为JQGrid是基于JQuery的,所以当然要引用到JQ啦.
<script type="text/javascript" src="../scripts/jQuery/jquery-1.4.2.min.js"></script>
JQGRID现在已经完美的和JQ的另一个界面插件JQUI合并了,所以可以用更丰富的界面.下面是引入JQUI:
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery-ui-1.8.4.custom.min.js"></script>
当然,最重要的是一定要引入JQGRID的文件咯,呵呵,但是这里要注意到的是,你去jqgrid的官网里下载的时候,里面还会有一个本地化的扩展包,当然我选中文的,而且一定要让这个js包在JQGRID的前面,这是官网提到的:
<script type="text/javascript" src="../scripts/jQuery/plugins/grid.locale-cn.js"></script>
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery.jqGrid.min.js"></script>
还有UI和JQGRID的css文件也要导入:
<link rel="stylesheet" type="text/css" media="screen" href="../themes/redmond/jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../themes/ui.jqgrid.css" />
完整的导入图如下:
2.客户端的配置
客户端的配置很重要,不仅是post到接下来的handler.ashx里面,还是从handler.ashx里get到的数据,都是很重要的.
大家可以参考一下 耿炜 大师的博客里也有介绍到JQGRID的配置参数,不详细介绍了,我主要是快速能调通为主.嘻嘻~偷懒ing~这里的东西很重要哦~官网的维基帮助是E文的,这里是全中文的!
代码
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'asynchronous/GridData.ashx?p=Comment',
datatype: "json",
height: 'auto',
colNames: ['评论ID', '类别ID', '文章ID', '留言人', '留言内容', '发布日期', '留言IP'],
colModel: [
{ name: 'CommentID', index: 'CommentID', sorttype: "int", width: 60 },
{ name: 'TypeID', index: 'TypeID', sorttype: "int", width: 60 },
{ name: 'FromID', index: 'FromID', sorttype: "int", width: 60 },
{ name: 'Name', index: 'Name', editable: true, width: 60 },
{ name: 'Contents', index: 'Contents', sortable: false, width: 300 },
{ name: 'PublishDate', index: 'PublishDate', sorttype: "date", width: 190 },
{ name: 'IP', index: 'IP', align: "right", sorttype: "float", editable: true, width: 130 }
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CommentID',
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: "#pager",
caption: "评论管理",
sortorder: "desc",
hidegrid: false
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
</script>
小小说明一下,这里的配置必须是数据库里的字段,我临时做了一个小小的数据库,里面有这么一个tb_comment表,仔细观察可以看出,是数据库的字段配置到了前台.
每次访问其实都带有很多参数:
然后JSONREADER是读取JSON的方式,告诉大家,成功的JSON应该是这个样子的:
代码
{"totalpages":"5","currpage":"1","totalrecords":"41","griddata":[{"CommentID":10041,"TypeID":10009,"FromID":10018,"Name":"木头","Contents":"恭喜啊~","PublishDate":"2010-08-15 10:42:54 507000","IP":"127.0.0.1"},{"CommentID":10040,"TypeID":10009,"FromID":10018,"Name":"我","Contents":"我","PublishDate":"2010-07-27 10:55:06 390000","IP":"127.0.0.1"},{"CommentID":10039,"TypeID":10009,"FromID":10014,"Name":"我","Contents":"我","PublishDate":"2010-04-18 11:25:21 640000","IP":"127.0.0.1"},{"CommentID":10038,"TypeID":10009,"FromID":10016,"Name":"w","Contents":"w","PublishDate":"2010-04-18 11:24:37 070000","IP":"127.0.0.1"},{"CommentID":10037,"TypeID":10009,"FromID":10018,"Name":"as","Contents":"test","PublishDate":"2010-04-18 10:57:19 517000","IP":"127.0.0.1"},{"CommentID":10036,"TypeID":10009,"FromID":10000,"Name":"小东","Contents":"恭喜啊...","PublishDate":"2010-04-16 08:41:19 633000","IP":"127.0.0.1"},{"CommentID":10035,"TypeID":10009,"FromID":10000,"Name":"发","Contents":"34的多5的 ","PublishDate":"2010-04-16 08:37:57 080000","IP":"127.0.0.1"},{"CommentID":10034,"TypeID":10009,"FromID":10000,"Name":"345","Contents":"345","PublishDate":"2010-04-16 08:31:40 893000","IP":"127.0.0.1"},{"CommentID":10033,"TypeID":10009,"FromID":10000,"Name":"123","Contents":"13","PublishDate":"2010-04-16 08:31:01 003000","IP":"127.0.0.1"},{"CommentID":10032,"TypeID":10009,"FromID":10000,"Name":"这些是","Contents":"这些 是","PublishDate":"2010-04-16 08:27:37 723000","IP":"127.0.0.1"}]}
