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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

(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"}]}