这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来看到前辈用的JQgrid,决定拿来学习下,并且想跟以前用过的技术做一个对比。
JQGrid很好上手,但是里面有很多规则记起来比较头疼。
1.下载文件
- 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:http://www.trirand.com/blog/?page_id=6
- 下载jQuery文件,目前最新版本为1.8.2 下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
- 下载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
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 | $( this ).ready( function () { jQuery( "#list1" ).jqGrid({ url: "/Home/SearchResult" , datatype: "json" , colNames: [ 'Inv No' , 'Date' , 'Client' , 'Amount' , 'Tax' , 'Total' , 'Notes' ], colModel: [ { name: 'InvNo' , index: 'InvNo' , width: 55 }, { name: 'InvDate' , index: 'InvDate' , width: 90 }, { name: 'Client' , index: 'Client' , width: 100 }, { name: 'Amount' , index: 'Amount' , width: 80, align: "right" }, { name: 'Tax' , index: 'Tax' , formatter: 'currency' , width: 80, align: "right" }, { name: 'Total' , index: 'Total' , width: 80, align: "right" }, { name: 'Note' , index: 'Note' , width: 150, sortable: false } ], rowNum: 10, rowList: [10, 20, 30], pager: '#pager1' , pgbuttons: true , sortname: 'id' , mtype: "post" , viewrecords: true , sortorder: 'desc' , emptyrecords: "NO records" , multiselect: true , rownumbers: true , caption: "JSON 实例" }); jQuery( "#list1" ).jqGrid( 'navGrid' , '#pager1' , { edit: true , add: true , del: true }); |
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格式的泛型类:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC4.BusinessLogic { public class JQGrid { private class JsonRow { public object [] cell { get ; set ; } public JsonRow( int Columns) { cell = new object [Columns]; } public void SetJsonCol( object data, int colnum) { cell[colnum] = data; } } public object JsonRowModel { get ; set ; } public JQGrid(IEnumerable< object > gridData, int columnTotal, int currentPage, int totalRecords, int totalPages) { List<JsonRow> jsonRowData = new List<JsonRow>(); for ( var d = 0; d < totalRecords; d++) { var data = gridData.ToList()[d]; Type t = data.GetType(); var pops = t.GetProperties(); var row = pops.Select(p => p.GetValue(data, null )).ToArray(); JsonRow jsonRow = new JsonRow(columnTotal); for ( int c = 0; c < columnTotal; c++) { jsonRow.SetJsonCol(row[c], c); } jsonRowData.Add(jsonRow); } JsonRowModel = new { page = currentPage,total = totalPages, records = totalRecords, rows = jsonRowData.ToArray() }; } } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步