JQGrid 学习1
这几天一直在学习基于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
- $(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设置:
- 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格式
- {
- "page": "xxx",
- "total": "yyy",
- "records": "zzz",
- "rows" : [
- { "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name,但是需要与colModel一一对应
- {"cell" :["cell21", "cell22", "cell23"]},
- ... ]
- }
注意大小写,期间把cell写成Cell一直没有出来数据
repeatitems为false,json格式
- {
- "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格式的泛型类:
- 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() };
- }
- }
- }
JQGrid 学习1的更多相关文章
- Jqgrid学习API
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- jqGrid 学习
jqGrid 学习: 一.下载需要的jqGrid包:http://www.trirand.com/blog/?page_id=6 二.下载JQuery UI:http://jqueryui.com/d ...
- Jqgrid学习(转载)
jqGrid API 全 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...
- jQgrid学习笔记
jQgrid学习笔记
- jqgrid学习笔记(转载)
jqgrid中文帮助文档网址:http://blog.mn886.net/jqGrid/ jqgrid:用来做什么? jqgrid是web端前台表格控件,用它可以轻松将数据格式化显示,前后台用过aja ...
- jqGrid 学习笔记--数据异步加载方法(转)
var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...
- jqGrid学习笔记(二)
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...
- jqGrid学习笔记(一)
3.2.body中的代码 <!-- jqGrid table list4 --> <table id="list4"></table> < ...
- ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...
随机推荐
- keyFile 巩固练习
系统 : Windows xp 程序 : noodles-crackme2 程序下载地址 :http://pan.baidu.com/s/1mhJ4Ems 要求 : 编写KeyFile 使用工具 : ...
- 机器学习之分类器性能指标之ROC曲线、AUC值
分类器性能指标之ROC曲线.AUC值 一 roc曲线 1.roc曲线:接收者操作特征(receiveroperating characteristic),roc曲线上每个点反映着对同一信号刺激的感受性 ...
- 【转】Xcode概览:调试应用程序
原文转自:http://www.cocoachina.com/ios/20141128/10358.html 本文由CocoaChina翻译组成员Creolophus(github主页)翻译自苹果官方 ...
- 如何清除SQL Server Management Studio的最近服务器列表
SQL Server Management Studio (SSMS) 的"连接到服务器"对话框会记录用户所有访问过的服务器名称,这个功能对于经常连接多个数据库的人来说确实挺方便的 ...
- 2015.10.15class
#include<stdio.h> main() { int a; printf("你的智商是多少?\n"); scanf("%d",&a) ...
- 最小生成树——kruskal算法
kruskal和prim都是解决最小生成树问题,都是选取最小边,但kruskal是通过对所有边按从小到大的顺序排过一次序之后,配合并查集实现的.我们取出一条边,判断如果它的始点和终点属于同一棵树,那么 ...
- touch srceen
/etc/udev/rules.d touchrules reset
- sleep和wait的区别?
sleep指线程被调用时,占着CPU不工作,形象地说明为"占着CPU睡觉",此时,系统的CPU部分资源被占用,其他线程无法进入,会增加时间限制.wait指线程处于进入等待状态,形象 ...
- Python检测IP合法 是否为公网IP
判断IP 格式是否正确 def check_value(self, ipaddr): '''检查IP是否合法 :param ipaddr: string :return True ''' addr=i ...
- 文件操作 模式r+与w+
r+与w+ r+是读写模式,在文件的末尾进行追加操作. >>> myfile=open('pwd.txt', ... 'r+') >>> myfile.read() ...