jqgrid方法-中文

jqgrid的异步请求方法摘要：1.异步请求方法概述2.jqGrid简介3.jqGrid的异步请求方法4.异步请求方法的优缺点5.总结正文：异步请求方法在Web开发中广泛应用，尤其在处理大量数据和提高用户体验方面具有重要价值。

本文将介绍一种名为jqGrid的JavaScript库，它提供了强大的异步请求功能。

最后，我们将讨论异步请求方法的优缺点，以帮助读者更好地了解这一技术。

1.异步请求方法概述异步请求方法是指在Web应用程序中，当客户端向服务器发送请求时，不再等待服务器响应后再继续执行后续操作，而是采用一种非阻塞的方式进行处理。

这种方式可以提高程序的响应速度，减少用户等待时间，提升用户体验。

2.jqGrid简介jqGrid是一款基于jQuery的表格插件，它可以对数据进行排序、筛选、分页等操作。

jqGrid具有丰富的配置选项和事件，易于定制和扩展。

在jqGrid 中，异步请求方法被称为“grid”。

3.jqGrid的异步请求方法在jqGrid中，异步请求方法主要通过以下几个步骤实现：（1）配置异步请求选项：在jqGrid的初始化过程中，可以设置异步请求的相关选项，如url、dataType、jsonReader等。

（2）绑定异步请求事件：通过jqGrid的“gridBeforeRequest”和“gridComplete”事件，可以在请求前后执行自定义逻辑。

（3）处理异步请求响应：当服务器返回响应时，jqGrid会自动处理数据，并更新表格内容。

（4）分页和排序：jqGrid支持动态分页和排序功能，可以根据用户设置的排序条件和分页参数进行异步请求。

4.异步请求方法的优缺点优点：- 提高程序响应速度，提升用户体验；- 充分利用浏览器和服务器资源；- 易于扩展和定制。

缺点：- 增加了服务器负担，可能影响性能；- 复杂度较高，初学者上手难度较大；- 跨域请求时，需要处理跨域问题。

5.总结异步请求方法在Web开发中具有广泛的应用前景，jqGrid作为一款强大的表格插件，为开发者提供了便捷的异步请求功能。

5、jqGrid 3.6.2 中文文档——BasicGrid（3）5、jqGrid 3.6.2 中文文档——BasicGrid（3）分类：JQuery 2010-07-29 13:29 3710人阅读评论(0) 收藏举报Events（事件）事件响应动作被设置为表格的属性，以下定义了行被选中时的响应：var lastSel;jQuery("#gridid").jqGrid({...onSelectRow: function(id){if(id && id!==lastSel){jQuery('#gridid').restoreRow(lastSel);lastSel=id;}jQuery('#gridid').editRow(id, true);},...});以下按字母顺序列出了可响应的时间：事件参数描述afterInsertRowRowedRowdataRowelem此事件发生在每次插入行后rowid 为插入的行IDrowdata 是被插入行的数据数组。

格式为name:value对，name 在colModel定义rowelem 是应答元素。

xml为xml行，json为所有行数据。

注意：若gridview 为true，此事件不会发生beforeRequestnone此事件发生在任何数据请求前，但当datatype为function时不发生。

beforeSelectRowrowid, e此事件发生在用户点击行，选中该行前。

rowid 为行的ID，e为事件对象该事件将返回布尔值true（行被选中）或false（行未被选中）。

gridCompletenone此事件发生在表格所有数据装入和进程完成后。

与datatype 参数及排序分页等无关。

loadBeforeSendxhr此事件发生在XMLHttpRequest被发送前，用于修改对象属性（如headers）。

jqGrid -- 自定义按钮用法：如果使用新API默认参数caption：按钮名称，可以为空，string类型buttonicon：按钮的图标，string类型，必须为UI theme图标onClickButton：按钮事件，function类型，默认null position：first或者last，按钮位置title：string类型，按钮的提示信息cursor：string类型，光标类型，默认为pointer id：string类型，按钮id如果设置多个按钮：按钮间的分隔默认参数：sepclass：ui-jqgrid的属性名sepcontent：分隔符的内容jqGrid -- 翻页与自定义按钮补充jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。

也可以增加自定义的函数。

导航工具栏是定义到翻页控件上的。

定义如下：JS的用法：如果使用新API：或者：grid_id ：表格idgridpager ：导航栏idparameters ：参数列表prmEdit, prmAdd, prmDel, prmSearch, prmView ：事件参数使用：详细参数说明属性类型说明默认值add boolean 是否启用新增功能，当点击按钮时会触发editGridRow事件trueaddicon string 给新增功能设置图标，只有UItheme里的图标才可以使用ui-icon-plusaddtext string 新增按钮上的文字空addtitle string 当鼠标移到新增按钮上时显示的提示新增一行alertcap string 当我们edit,delete or view一行记录时出现的提示信息警告alerttext string 当edit,delete or view一行记录时的文本提示请选择一行记录closeOnEscape boolean 是否可以使用esc键关闭对话框true del boolean 是否启用删除功能，启用时会触发事件delGridRowtruedelicon string 设置删除按钮的图标，只有UItheme里的图标才可以使用ui-icon-trashdeltext string 设置到删除按钮上的文字信息空deltitle string 当鼠标移到删除按钮上时出现的提示删除锁选择的行edit boolean 是否启用可编辑功能，当编辑时会触发事件editGridRowtrueediticon string 设置编辑按钮的图标，只有UItheme里的图标才可以使用ui-icon-penciledittext string 编辑按钮上文字空edittitle string 当鼠标移到编辑按钮上出现的提示信息编辑所选择的行position string 定义按钮位置，可选值left,center and right.leftrefresh boolean 是否启用刷新按钮，当点击刷新按钮时会触发trigger(“reloadGrid”)事件，而且true会清空搜索条件值refreshicon string 设置刷新图标，只有UI theme里的图标才可以使用ui-icon-refreshrefreshtext string 刷新按钮上文字信息空refreshtitle string 当鼠标移到刷新按钮上的提示信息重新加载refreshstate string 指明表格如何刷新。

Jqgrid3.6 中文文档jqGrid学习----------- 原理 (2)jqGrid学习之--------- 皮肤 (2)jqGrid学习 (2)jQuery学习之：jqGrid表格插件——参数配置 (4)jqGrid学习--------------自定义搜索 (14)jqGrid学习-------------- 搜索工具栏 (16)jqGrid学习-------------- 搜索 (17)jqGrid学习-------------- 自定义格式化类型 (19)jqGrid学习-------------- 格式化 (22)jqGrid学习-------------- 自定义按钮 (26)jqGrid学习-------------- 翻页（2） (28)jqGrid学习-------------- 翻页 (33)jqGrid学习-------------- 配置json (36)jqGrid学习-------------- 方法 (38)jqGrid学习----------- 事件 (46)jqGrid学习----------- 数据 (48)jqGrid学习-------------- ColModel API (55)jqGrid学习----------- 参数（2） (57)jqGrid学习------------------ jqGrid参数 (63)jqGrid学习----------------- 第一个实例 (64)使用jqGrid修改数据并检查 (70)jqGrid学习 ----------- 原理jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。

换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。

对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。

jqgrid学习（7）方法jqGrid的方法，从3.6开始已经完全兼容jQuery UI库。

用法：Java代码1.<script>2....3.jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );4....5.</script>grid_id:表格的id；jqGridMethod：用到表格上的方法；parameter1,…parameterN ：参数列表此方法并不是返回请求的数据值而是返回一个jqGrid对象。

Java代码1.<script>2....3.jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");4....5.</script>如果使用新的API：Java代码1.<script>2....3.jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );4....5.</script>grid_id:表格id；jqGrid：表格实例；method：表格支持的方法名；parameter1,...parameterN ：参数列表具体实例：Java代码1.<script>2....3.jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");4....5.</script>jqGrid配置使用新的apiJava代码1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">2.<html xmlns="http://www.w/1999/xhtml" xml:lang="en" lang="en">3.<head>4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5.<title>My First Grid</title>6.7.<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />8.<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />9.10.<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>11.<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>12.<script type="text/javascript">13. jQuery.jgrid.no_legacy_api = true;14.</script>15.<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>16.17.</head>18.<body>19....20.</body>21.</html>要注意Java代码1.<script type="text/javascript">2. jQuery.jgrid.no_legacy_api = true;3.</script>这段代码必须放在语言包之后jqGrid.js文件之前。

一、电子信息技术 (2)（一）软件.................................................................................................... 错误！未定义书签。

（二）微电子技术 ...................................................................................... 错误！未定义书签。

（三）计算机及网络技术 ............................................................................ 错误！未定义书签。

（四）通信技术............................................................................................ 错误！未定义书签。

（五）广播电视技术 .................................................................................. 错误！未定义书签。

（六）新型电子元器件 ................................................................................ 错误！未定义书签。

（七）信息安全技术 .................................................................................... 错误！未定义书签。

（八）智能交通技术 .................................................................................... 错误！未定义书签。

6、jqGrid3.6.2中文文档——BasicGrid（4）6、jqGrid 3.6.2 中文文档——BasicGrid（4）分类： JQuery 2010-07-29 13:35 2118人阅读评论(1) 收藏举报Common functions and settings（公共功能和设置）这些功能可用于任何项目中，不限于jqGrid对象。

语法为：<script>...jQuery.jgrid.jqGridFunction( parameter1,...parameterN );...</script>这里：jgrid.jqGridFunction是函数名.parameter1,…parameterN 为参数列表注意命名空间jgridAdd on Grid Methods（附加表格方法）要使用这些方法，需要在下载grid是选中Custom 复选框。

开发版中，这些方法位于grid.custom.js 中。

HOW TO jqGrid的公共问题允许FireFox RTL (Right To Left)语言jqGrid完全支持FireFox 3.x和Internet Explorer 6。

FireFox缺省设置不兼容RTL，可如下修改:在FireFox的URL输入about:config，出现警告信息；在Find中输入layout.scrollbar.side；双击layout.scrollbar.side修改0为1。

RTL 从3.6后开始可用。

配置jqGrid只使用新API此工作应在安装过程中按以下步骤：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/i18n/grid.locale-en.js" type="text/javascript"></script><script type="text/javascript">jQuery.jgrid.no_legacy_api = true;</script><script src="js/jquery.jqGrid.min.js" type="text/javascript"></script></head><body>...</body></html>注意调用：<script type="text/javascript">jQuery.jgrid.no_legacy_api = true;</script>This line should be after the language file and before the jqGrid JS file新的jqGrid API从3.6开始可用配置jqGrid是浏览器支持JSON.parse到目前为止，主流浏览器IE8, Firefox 3.5和Chrome 3已经支持JSON解析。

1、jqGrid 3.6.2 中文文档——安装jqGrid（1）收藏在你开始之前在你开始jqGrid之前，你需要具有基本的JavaScript和jQuery知识。

有关jQuery的知识可访问jQuery网站。

当你已有了这些基础知识后，我们从jqGrid的系统需求开始。

系统需求基本需求：浏览器（Mozilla FireFox、Safari、Google Chrome、Opera、Microsoft Internet Explorer）jQuery库v1.3及以上（）jQuery UI主题（/themeroller/#themeGallery）jqGrid插件（/blog/?page_id=6）本地（静态）数据（如数组数据、XML数据文件或JSON数据文件）jqGrid主要是为了操作和呈现服务器上的动态数据，因此，你还需要一个web服务器（如IIS、Apache、Tomcat），一个数据库（如PostgreSQL、Oracle、MSSQL、MySQL）和服务器端脚本语言（如PHP、ASP）下载jqGrid你可以通过jqGrid网站的jqGrid下载生成器选择你需要的组件，生成适合你要求的jqGrid副本后下载。

选择你需要的组件下载生成器列出了所有组件：base，editing，subgrid，treegrid，import/export 和user contributed modules。

你选择的组件将合并为一个javascript文件——jquery.jqGrid.min.js。

选择完成后，点击Download按钮，你将得到包含你所选内容的压缩文件。

下载后下载后的压缩文件包括以下文件：/css/ui-jqgrid.css/js//i18n/grid.locale-bg.js所有语言文件….Changes.txtjquery-1.3.2.min.jsjquery.jqGrid.min.js/src//i18n/grid.locale-bg.js所有语言文件…./css/jquery.searchFilter.cssui-jqgrid.cssgrid.base.jsgrid.celledit.jsmon.jsgrid.custom.jsgrid.formedit.jsgrid.import.jsgrid.inlinedit.jsgrid.loader.jsgrid.postext.jsgrid.setcolumns.jsgrid.subgrid.jsgrid.tbltogrid.jsgrid.treegrid.jsjqDnR.jsjqModal.jsjquery.fmatter.jsjquery.searchFilter.jsjson2.jsJsonXml.js从文件结构上看，jqGrid需要的文件在/css/ 和/js/ 目录中，这些文件已被简化用于运行环境。

JqGrid中⽂⽂档最近使⽤JQGrid 发现其中⽂资料⾮常的少。

⼏乎没有，⽽英⽂资料⼤部份是PHP。

所以写⼀些资料⽅便⾃⼰和⼤家以后的使⽤。

先来看⼀个我在官⽅⽹站复制的简单的例⼦。

1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>2:3: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">4: <html xmlns="/1999/xhtml">5: <head id="Head1"runat="server">6: <title>⽆标题页</title>7: <link href="JS/jquery-ui-1.7.2.custom.css"rel="stylesheet"type="text/css"/>8: <link href="JS/ui.jqgrid.css"rel="stylesheet"type="text/css"/>9:10: <script src="JS/jquery-1.3.2.min.js"type="text/javascript"></script>11:12: <script src="JS/grid.locale-cn.js" type="text/javascript"></script>13:14: <script src="JS/jquery.jqGrid.min.js" type="text/javascript"></script>15:16: <script type="text/javascript">17: $(document).ready(function(){18:19: jQuery("#setcols").jqGrid({20: url:'Default2.aspx',21: datatype: "json",22: colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],23: colModel:[24: {name:'id',index:'id', width:55,hidedlg:true},25: {name:'invdate',index:'invdate', width:90,editable:true},26: {name:'name',index:'name asc, invdate', width:100},27: {name:'amount',index:'amount', width:80, align:"right",editable:true,editrules:{number:true}},28:29: {name:'tax',index:'tax', width:80, align:"right",editable:true,editrules:{number:true}},30: {name:'total',index:'total', width:80,align:"right"},31: {name:'note',index:'note', width:150, sortable:false}32: ],33: rowNum:10,34: pager: '#psetcols',35: sortname: 'id',36: sortorder: "desc"37: });38:39: })40:41:42: </script>43:44: </head>45: <body>46: <table id="setcols">47: </table>48: <div id="psetcols">49: </div>50: </body>51: </html>我们需要引⽤的⽂件分别为1JQUERYUI 的CSS样式⽂件jquery-ui-1.7.2.custom.css2JqGrid插件的样式⽂件ui.jqgrid.css3JQUERY 1.3.2的JS⽂件jquery-1.3.2.min.js4JqGrid插件的中⽂配置⽂件grid.locale-cn.js5最后是JqGrid本⾝的JS压缩⽂件jquery.jqGrid.min.jsDefault2.aspx的功能是返回JSON数据数据如下{"page": "1","total": 2,"records": "13","rows": [{"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]},{"Client 1","50.00","10.00","60.00",null]},{"id": "5","cell": ["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax"]},{"id": "4","cell": ["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],"userdata": {"amount": 3220,"tax": 342,"total": 3564,"name": "Totals:"}}代码中table ID 为setcols的是⽤于显⽰数据、代码中div ID 为psetcols的是⽤于显⽰数据下⽅的按钮，分页，搜索等按钮JavaScript代码中jqGrid()⽅法是⽤于初始化JqGrid的⽅法⽅法⼤概参数如下属性名类型默认值是否必需备注url字符串""是获取数据的地址height数字150当值为100%时会随数据的数量⽽⾃动调整⾼度page数字1当前页数rowNum数字20每页⾏数records数字0pager字符串或对象否⼯具条所显⽰的容器pgbuttons布尔值true否是否显⽰上⼀页下⼀页的按钮pginput布尔值true否是否显⽰录⼊跳转页数的⽂本框colModel数组[]是定义数据列rowList数组[]否每页⾏数下拉选项未设置为不显⽰该下拉选项colNames数组[]是显⽰的列名，需要和colModel的列数匹配sortorder字符串"asc"否排序字段的排序类型为asc和descsortname字符串""要排序列名datatype字符串"xml"否数据传递的类型⼀般有xml和jsonmtype字符串"GET"否请求的类型⼀般有GET和POSTaltRows布尔值false否设置表格是否显⽰斑马条纹selarrrow数组[]否savedRow数组[]否shrinkToFit布尔值true否xmlReader对象{}否jsonReader对象{}否subGrid布尔值false否subGridModel数组[]reccount数字0lastpage数字0lastsort数字0selrow⽅法nullbeforeSelectRow⽅法nullonSelectRow⽅法null当选择⼀⾏时引发的事件onSortCol⽅法nullondblClickRow⽅法null当双击⼀⾏时引发的事件onRightClickRow⽅法nullonPaging⽅法nullonSelectAll⽅法nullloadComplete⽅法nullgridComplete⽅法nullloadError⽅法nullloadBeforeSend⽅法nullafterInsertRow⽅法nullbeforeRequest⽅法nullonHeaderClick⽅法nullviewrecords布尔值falseloadonce布尔值falsemultiselect布尔值falsemultikey布尔值falseediturl字符串null添加编辑删除操作时数据提交的页⾯search布尔值false否是否显⽰搜索按钮caption字符串""否表格上⽅的标题，不写为不显⽰hidegrid布尔值truehiddengrid布尔值falsepostData对象{}userData对象{}treeGrid布尔值false否是否为树型GRIDtreeGridModel字符串'nested'否树型GRID的数据源格式⼀般分为nested和adjacencytreeReader对象{}treeANode数字-1ExpandColumn字符串null否为树型GRID时按钮所在的列(在定义treeGrid情况下，指明那⼀列⽤来伸展树)tree_root_level数字0否prmNames对象{page:"page",rows:"rows",否数据请求时的request的参数设定sort: "sidx",order: "sord",search:"_search",nd:"nd"}forceFit布尔值falsegridstate字符串"visible"cellEdit布尔值false设置表格单元是否可以编辑cellsubmit字符串"remote"nv0loadui字符串"enable"toolbar数组[false,""]scroll布尔值falsemultiboxonly布尔值falsedeselectAfterSort布尔值truescrollrows布尔值falseautowidth布尔值false否是否⾃动宽度scrollOffset数字18cellLayout数字5subGridWidth数字20multiselectWidth数字20gridview布尔值false在⼯具条上是否显⽰总条数等信息rownumWidth数字25rownumbers布尔值falsepagerpos字符串'center'recordpos字符串'right'footerrow布尔值falseuserDataOnFooter布尔值falsehoverrows布尔值truealtclass字符串'ui-priority-secondary'viewsortcols数组[false,'vertical',true]resizeclass字符串''autoencode布尔值falseremapColumns数组[]ajaxGridOptions对象{}direction字符串"ltr"先写到这⾥。

jqGrid是一个强大的jQuery插件，用于创建分页、排序、过滤和编辑的表格。

以下是一些jqGrid的基本用法：1. 创建表格：```javascript$("#grid").jqGrid({url: 'data.json', // 数据源URLdatatype: 'json', // 数据类型colModel: [ // 列模型{ name: 'id', key: true },{ name: 'name' },{ name: 'email' }],pageNumber: 1, // 初始页面号pageSize: 10, // 初始页面大小ajaxGridOptions: { cache: false }, // 配置Ajax请求选项 serializeGridData: function (postData) {return JSON.stringify(postData);},loadComplete: function () {// 在数据加载完成后执行的回调函数},loadError: function (jqXHR, textStatus, errorThrown) { // 在数据加载出错时执行的回调函数}});```2. 添加行：```javascript$("#grid").jqGrid('addRowData', rowId, data);```3. 编辑行：```javascript$("#grid").jqGrid('editRow', rowId, true); // true表示保存更改```4. 删除行：```javascript$("#grid").jqGrid('delRowData', rowId);```5. 刷新表格：```javascript$("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');```6. 自定义排序：```javascript$("#grid").jqGrid('sortGrid', 'name', true); // 按名称排序，true表示升序排序```7. 自定义分页：```javascript$("#grid").jqGrid('setGridParam', { pageNumber: 2, pageSize: 10 }); // 设置页面号和页面大小```。