一、jqGrid的基本用法
1、html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqgrid-test</title> <!-- 引用jQueryUI的start主题 --> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" /> <!-- 引用jqGrid样式 --> <link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" /> <!-- 引用jQuery --> <script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script> <!-- 引用jqGrid --> <script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script> <!-- 引用jqGrid提供的国际化，否则中文会报JS错误 --> <script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script> <!-- 引用jqGrid测试js --> <script type="text/javascript" src="/resources/scripts/init.js"></script> </head> <body> <!-- jqGrid必要DOM，用于创建表格列表 --> <table id="list"></table> <!-- jqGrid必要DOM，用于创建翻页 --> <div id="pager"></div> </body> </html>
2、init.js文件
jQuery("#list").jqGrid({
// 请求后台json数据的url
url:'list.json',
// 后台返回的数据格式
datatype: "json",
// 列表标题
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
// 列表模型
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
// 一页显示的行记录数
rowNum:10,
// 表格宽度
width:700,
// 表格高度
height:200,
// 翻页控制条中 每页显示记录数可选集合
rowList:[10,20,30],
// 翻页DOM
pager: '#pager',
// 默认排序字段
sortname: 'invdate',
// 是否显示行号，默认值是false，不显示
viewrecords: true,
// 默认字段排序顺序，默认asc，正序
sortorder: "desc",
// 列表总标题
caption:"测试",
// 数据加载完成并且DOM创建完毕之后的回调函数
gridComplete: function(){
//TODO
},
// 单元格被点击选择回调函数， rowid为改行数据id值，iCol为改行索引，cellcontent为该行html代码，e为click事件
onCellSelect: function(rowid, iCol, cellcontent,e){
//TODO
}
});
二、后台返回的数据及格式
格式1 ：行数据包含id、cell两个固定属性，id的值是行数据的主键值，cell的值是行数据的数组封装
{
"page":"1",
"total":2,
"records":"13",
"rows":[
{
"id":"13",
"cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]
},{
"id":"12",
"cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]
},{
"id":"11",
"cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]
},{
"id":"10",
"cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]
},{
"id":"9",
"cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]
},{
"id":"8",
"cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]
},{
"id":"7",
"cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]
},{
"id":"6",
"cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]
},{
"id":"5",
"cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]
},{
"id":"4",
"cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]
}
]
}
格式2 ：直接把后台行数据json格式化
{
"page":"1",
"total":2,
"records":"13",
"rows":[
{
"id":"1",
"invdate":"2007-10-06",
"name":"Client 3",
"amount":"1000.00",
"tax":"0.00",
"total":"1000.00",
"note": null
},
{
"id":"2",
"invdate":"2007-10-06",
"name":"Client 3",
"amount":"1000.00",
"tax":"0.00",
"total":"1000.00",
"note": null
},
...
]
}
三、后台返回数据的说明
| total | 查询的总页数 |
| page | 查询的当前页码 |
| records | 查询的总记录数 |
| rows | 当前查询页的数据集合 |
| id | 行数据主键，默认值0 |
| cell | 行数据的数组格式封装，默认值“” |
四、自定义后台返回数据属性
后台返回的数据格式必须满足上述两种格式，否则jqGrid解析就会错误或者某些功能失效。
更多情况下，后台返回的数据格式是符合上述两种格式之一的，只是属性名不一致而已。
比如jqGrid的page是当前页面，而多数应用程序可能会自定义为currPage，这个时候jqGrid
就无法解析了，不过jqGrid提供了jsonReader属性，可以让我们覆盖它原有的属性。
我们先看一下它的原有属性：
localReader = {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", repeatitems: true, cell:"cell"}
}
我们只需要定义jqGrid时设置jsonReader属性即可：
$(document).ready(function(){
jQuery("#list").jqGrid({
// 请求后台json数据的url
url:'list.json',
...
// 重写后台返回数据的属性
jsonReader : {
root : 'list', // 将rows修改为list
page : 'currPage', // 将page修改为currPage
total : 'totalPage', // 将total修改为totalPage
records : 'totals' // 将records修改为totals
}
});
});
五、自定义请求参数
jqGrid异步请求的默认请求参数属性包含：
{
page:"page",
rows:"rows",
sort:"sidx",
order:"sord",
search:"_search",
nd:"nd",
id:"id",
oper:"oper",
editoper:"edit",
addoper:"add",
deloper:"del",
subgridid:"id",
npage:null,
totalrows:"totalrows"
}
比如：http://localhost:8080/list.json?_search=false&nd=1381300504786&rows=10&page=1&sidx=invdate&sord=desc
如果需要改写请求参数属性，jqGrid也提供了prmNames这个属性用来修改请求参数属性。
我们只需要定义jqGrid时设置prmNames属性即可：
$(document).ready(function(){
jQuery("#list").jqGrid({
url:'list.json',
...
prmNames : {
'page':'currPage',
'rows':'pageSize'
}
});
});
上面的请求示例就会修改为
http://localhost:8080/list.json?_search=false&nd=1381300504786&pageSize=10&currPage=1&sidx=invdate&sord=desc
相关推荐
本资源包含的"jqgrid全套示例代码"涵盖了 jqGrid 的多种使用场景，帮助开发者深入理解和应用这个插件。 1. **Web.config**：这是ASP.NET应用程序的核心配置文件，包含了应用程序的设置，如连接字符串、身份验证模式...
本示例将深入探讨如何在ASP.NET环境中集成并使用jqGrid控件。 一、jqGrid概述 jqGrid是一款开源的jQuery插件，支持多种功能，如数据分页、排序、搜索、过滤、编辑和添加记录等。它具有高度可定制性，可以通过主题和...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web应用程序中展示和操作数据。它基于jQuery库，提供了...通过研究源代码和示例，开发者可以更好地掌握jqGrid的使用技巧，灵活应对各种复杂的数据展示和管理需求。
1. **基本使用**：介绍如何在HTML页面中引入jqGrid所需的JavaScript和CSS库文件，这通常通过`<script>`和`<link>`标签完成，确保jqGrid的核心功能和样式正常工作。 2. **表格初始化**：讲解如何使用JavaScript创建...
以下是jqGrid的基本配置示例： ```javascript $("#grid").jqGrid({ url: 'Service.svc/GetData', // WCF服务地址 datatype: 'json', mtype: 'GET', colNames: ['字段1', '字段2', '字段3'], // 列标题 colModel...
8. **API参考**：在实际使用过程中，查阅官方文档（如http://www.trirand.com/blog/）和社区资源（如提供的参考网址http://blog.mn886.net/jqGrid/）是非常重要的，它们提供了详细的API参考和示例代码，有助于解决...
jqGrid是一款功能强大的JavaScript数据网格插件，常用于创建交互式的HTML表格，它支持大量...通过分析和运行这个项目，开发者可以更深入地理解和掌握jqGrid的使用方法，从而在实际工作中有效地应用到自己的Web应用中。
通过学习和参考这些示例，开发者可以快速掌握JqGrid的基本用法，并将其应用到自己的项目中。 至于"JqGrid主题"，则是指为JqGrid提供的视觉样式。JqGrid默认有多种主题，比如"ui.jqgrid"代表了jQuery UI的主题风格，...
本示例将深入探讨如何使用jqGrid与WCF服务（Windows Communication Foundation）配合，通过JSON传递参数以执行这些操作。 首先，我们需要在HTML页面中引入jqGrid所需的CSS和JavaScript文件。这通常包括jQuery库、...
**MVC 模式与 JqGrid 结合详解** MVC（Model-View-Controller）是一种软件设计模式，常用于创建可维护、...通过理解并实践MVC的控制器、视图和JqGrid的配置与使用，开发者能够提升Web应用程序的用户体验和功能丰富度。
总结，本示例展示了如何在jqGrid 4.1中使用JSON进行多字段查询，同时结合WCF服务的OperationContract重载来处理复杂的查询逻辑。这种组合提供了强大的前后端交互能力，使得Web应用程序能够灵活、高效地处理数据查询...
通过查看这个示例，你可以学习如何在实际项目中将jqGrid与MVC4结合使用，实现数据的动态加载、分页、排序和过滤功能。 总之，jqGrid在ASP.NET MVC4中的集成能够极大地提升Web应用的数据展示能力，使用户可以方便地...
### JqGrid中文使用手册知识点概述 #### 一、JqGrid安装与配置 JqGrid是一款基于jQuery的网格插件，它提供了丰富的功能用于展示和管理数据表格。本章节详细介绍了如何安装JqGrid，并给出了一个简单的示例。 **...
例如，一个名为`GetGridData`的方法可以返回JSON格式的数据，供jqGrid使用。在MVC4中，这通常通过`JsonResult`类型的动作结果实现。每个具体的控制器（如`EmployeeController`、`OrderController`等）可以根据业务...
在“jqueryGridDemo jqGriddemo38”这个项目中，我们深入探讨jqGrid的使用方法，并通过一系列的示例代码来帮助理解其核心概念和功能。 首先，jqGrid的基础设置通常涉及HTML结构、CSS样式和JavaScript脚本。`jqgrid....
这篇博文中，我们将深入探讨 jqGrid 的 TreeGrid 功能及其用法。 ### 一、jqGrid TreeGrid 基础 1. **初始化 TreeGrid** 在 HTML 页面中，首先需要创建一个 `div` 元素作为 jqGrid 的容器。然后通过 jQuery 选择...
- HTML文件：展示jqGrid的基本用法和示例。 - JavaScript文件：包含jqGrid的库和可能的自定义脚本。 - CSS文件：用于样式控制和主题定制。 - 数据文件：如JSON或XML，用于填充网格数据。 - 图像文件：可能用于图标或...
通过研究其代码和实际运行效果，可以快速掌握jqGrid的基本用法和高级技巧。对于初学者来说，可以从以下几个方面入手： 1. **安装和引入**：了解如何将jqGrid添加到HTML页面中，以及需要引用哪些CSS和JS文件。 2. *...
本文将详细介绍一个典型的`jqGrid`初始化脚本，帮助开发者快速理解和掌握其基本用法。 #### 二、代码解析 ##### 1. 函数定义 ```javascript function pageInit() { // ... } ``` 这里定义了一个名为`pageInit`...
`jqgrid_demo40.zip`则包含了一些示例代码和页面，帮助开发者了解如何在实际项目中使用jqGrid4。这些示例可能涵盖以下主题： 1. 基本配置：如何初始化jqGrid，设置表格列，加载数据，启用分页等。 2. 数据操作：如何...