关于 ASP.net + JQuery + JQGrid + JSON.net 的简单应用(一)

(LIVE WRITER有点问题,发布的顺序都乱了)

      之前有朋友在他公司要用到JQ的插件JQGRID合并asp.net,但是他遇到问题,载入不了数据,于是我在网上到处找没找到一个可以用的asp.net例子,于是参考了几个PHP和几个JAVA的实现,给大家简单的介绍下如何在asp.net里使用这个插件:

因为我不会PHP,官方的demo其实介绍的还是比较详细的.

http://www.trirand.com/blog/jqgrid/jqgrid.html

 

所以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到的数据,都是很重要的.

http://blog.csdn.net/gengv/archive/2010/07/05/5714834.aspx

大家可以参考一下 耿炜 大师的博客里也有介绍到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表,仔细观察可以看出,是数据库的字段配置到了前台.

每次访问其实都带有很多参数:

http://localhost:1110/WebSite/admin/asynchronous/GridData.ashx?p=Comment&_search=false&nd=1282224345798&rows=10&page=1&sidx=CommentID&sord=desc

然后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"}]}

转载于:https://www.cnblogs.com/bant/archive/2010/08/20/1804103.html