一、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与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提供的视觉样式。JqGrid默认有多种主题,比如"ui.jqgrid"代表了jQuery UI的主题风格,...
例如,一个名为`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. 数据操作:如何...