plina

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  22 随笔 :: 0 文章 :: 0 评论 :: 14060 阅读
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来看到前辈用的JQgrid,决定拿来学习下,并且想跟以前用过的技术做一个对比。

JQGrid很好上手,但是里面有很多规则记起来比较头疼。

1.下载文件
  1. 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:http://www.trirand.com/blog/?page_id=6
  2. 下载jQuery文件,目前最新版本为1.8.2 下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
  3. 下载jqGrid皮肤,下载地址为:http://jqueryui.com/themeroller/ 我使用的是:ThemeRoller->gallery->cupertino样式

2.referance

和其他的jquery框架一样,首先需要引用jquery类库,jquery.jqgrid类库即可。

<scriptsrc="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"></script>

<scriptsrc="~/Scripts/jquery-ui-1.8.20.min.js"type="text/javascript"></script>

<scriptsrc="~/jqGrid/js/jquery.jqGrid.min.js"type="text/javascript"></script>

基本上到这里我们就可以简单做一个jqgrid,我模仿着demos做了一个。http://www.trirand.com/blog/jqgrid/jqgrid.html

URL:获取数据的地址

datatype:从服务器端返回的数据类型,默认xml。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside

colNames:列显示名字,数组

colModel:常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序

rowNum:默认每页显示的条数

rowList:下拉列表,可以改变每页显示的条数

pager:html元素,分页栏放置的位置。(如div的id)

sortname:默认排序的列

mtype:ajax提交方式。POST或者GET,默认GET

viewrecords:显示总的记录数(bool)

sortorder:排序方式

emptyrecords:没有记录时候显示的文字

multiselect:是否可以多选

rownumbers:如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增。此列名为'rn'.

caption:表格的标题

更多属性参考:http://blog.mn886.net/jqGrid/

Json格式的呈现:

刚开始有点想不通jqGrid到底接受什么样格式的Json呢。

后来查到有一个重要的选项jsonReader

 

jsonReader:默认的jsonReader设置:

1
2
3
4
5
6
7
8
9
jsonReader : {
 root: "rows",    // json中代表实际模型数据的入口
 page: "page",    // json中代表当前页码的数据
 total: "total",    // json中代表页码总数的数据
 records: "records", // json中代表数据行总数的数据
 repeatitems: true, // 如果设为false,则jqGrid在解析json时,会根据name来搜索对应的数据元素(即可以json中元素可以不按顺序);而所使用的name是来自于colModel中的name设定。
 cell: "cell",
 id: "id",
 userdata: "userdata"}

通常jsonReader和repeatitems是配合使用的,如果repeatitems为false,json中数据可以乱序,jqGrid会根据colModel中name属性和json数据对应,根据属性名解析。

repeatitems为true,json格式

1
2
3
4
5
6
7
8
9
{
 "page": "xxx",
 "total": "yyy",
 "records": "zzz",
 "rows" : [
{ "cell" :["cell11", "cell12", "cell13"]},    // cell中不需要各列的name,但是需要与colModel一一对应
 {"cell" :["cell21", "cell22", "cell23"]},
               ... ]
}

 注意大小写,期间把cell写成Cell一直没有出来数据

repeatitems为false,json格式

1
2
3
4
5
6
{
  "page" : "xxx",
  "total" : "yyy",
  "records" : "zzz",
  "rows" : [  {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的name,但是可以不按列的顺序     {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"}, ...   ]
}

 

这里有一个自动生成json格式的泛型类:

 

posted on   plina  阅读(367)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示