这几天一直在学习基于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

$(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的更多相关文章

  1. Jqgrid学习API

    JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...

  2. jqGrid 学习

    jqGrid 学习: 一.下载需要的jqGrid包:http://www.trirand.com/blog/?page_id=6 二.下载JQuery UI:http://jqueryui.com/d ...

  3. Jqgrid学习(转载)

    jqGrid API 全   JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...

  4. jQgrid学习笔记

    jQgrid学习笔记

  5. jqgrid学习笔记(转载)

    jqgrid中文帮助文档网址:http://blog.mn886.net/jqGrid/ jqgrid:用来做什么? jqgrid是web端前台表格控件,用它可以轻松将数据格式化显示,前后台用过aja ...

  6. jqGrid 学习笔记--数据异步加载方法(转)

    var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...

  7. jqGrid学习笔记(二)

    本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...

  8. jqGrid学习笔记(一)

    3.2.body中的代码 <!-- jqGrid table list4 --> <table id="list4"></table> < ...

  9. ASP.NET MVC and jqGrid 学习笔记 6-增删改操作

    程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...

随机推荐

  1. 什么是 kNN 算法?

    学习 machine learning 的最低要求是什么?  我发觉要求可以很低,甚至初中程度已经可以.  首先要学习一点 Python 编程,譬如这两本小孩子用的书:[1][2]便可.   数学方面 ...

  2. 配置和创建一个hibernate简单应用

    1.配置 到http://hibernate.org/orm/下载hibernate包然后解压 在eclipse中新建一个java project,如名为hibernate_test 再所建工程中新建 ...

  3. 关于ajax请求返回类型问题

    昨天遇到一个问题,是关于请求到的json数据没有正确渲染,打开谷歌调试器里面的network中的response,看到的是正常返回的json数据,打开json.cn,复制返回的数据,也能正常解析,但是 ...

  4. 一个简单的app自动登录Python脚本案例

  5. 如何让iOS 保持界面流畅?这些技巧你知道吗

    如何让iOS 保持界面流畅?这些技巧你知道吗   作者:ibireme这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路,同时给出一个开源的微博列表实现,通过实际的代码展示如 ...

  6. logstash 添加nginx日志

    选择需求分类废话少说直接上图 第一张图: 2.此图搭配的日志格式是: log_format main '$remote_addr - $remote_user [$time_local] $http_ ...

  7. Centos6.5 gitlab安装使用

    公司从svn转到git做版本管理,我搜了一下网上git的服务器,包括gitosis,gitolite等.一开始我是用的是gitosis作为git服务器的,安装过程还算比较简单,整个服务使用python ...

  8. Day25_多线程第二天

    1.单例); } 4.线程之间的通信(多个线程共享同一数据的问题) ; public void print1() throws InterruptedException { synchronized( ...

  9. DNS的查询流程

    我们可以通过一个命令了演示,同时进行抓包. 在OS X可以用dig命令进行查询追踪. dig @8.8.8.8 www.baidu.com 看看输出会是什么呢 ; <<>> D ...

  10. iOS开发之APP上线

    APP 上线有两种途径: 一种是 Xcode->openDeveloperTool->applicationLoader,这种打开后登陆appleID就可以选取并且交付您的应用程序了.这种 ...