程序博客网 > 北大青鸟it职业教育

jqGrid与Struts2的结合应用（二） ------ 操作Grid数据 .

来源：互联网 发布：北大青鸟it职业教育 编辑：程序博客网 时间：2024/04/28 03:02
 

上一篇中，jqGrid已经可以从Server端获得数据，并显示在Grid表格中了。下面说一下，如何操作Grid表格及其数据。

 

jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：

$("#grid_id").jqGridMethod( parameter1,...,parameterN );

或者

$("#grid_id").jqGrid('method', parameter1,...,parameterN );

 

首先介绍一下jqGrid的几个最常用的方法函数，具体的方法API也可以参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ）

 

1. getGridParam

 

这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，例如：

[javascript] view plaincopyprint?
  1. var id = $("#gridTable").jqGrid("getGridParam", "selrow");  

即可获得当前选中的行的ID。

 

注：selrow是jqGrid选项之一，默认值是null。这是一个只读选项，代表最后选中行的ID。如果执行翻页或者排序后，此选项将被设为null。关于其他选项，后续会有介绍。

 

如果不传入name参数，则会返回jqGrid整个选项options。

 

 

 

2. getRowData

 

这个方法用来获得某行的数据。它具有一个rowid参数，jqGrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。例如：

[javascript] view plaincopyprint?
  1. var getContact = function() {  
  2.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  3.       
  4.     var rowData = $("#gridTable").jqGrid("getRowData", selectedId);  
  5.       
  6.     alert("First Name: " + rowData.firstName);  
  7. };  

 

如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据。

 

 

 

3. addRowData

 

这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：

  • rowid ：新行的id号；
  • data ：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；
  • position ：插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
  • srcrowid ：新行将插入到srcrowid指定行的前面或后面。

例如：

[javascript] view plaincopyprint?
  1. var addContact = function() {  
  2.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  3.       
  4.     var dataRow = {   
  5.         id : 99,  
  6.         lastName : "Zhang",  
  7.         firstName : "San",  
  8.         email : "zhang_san@126.com",  
  9.         telNo : "0086-12345678"  
  10.     };  
  11.       
  12.     if (selectedId) {  
  13.         $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);  
  14.           
  15.     } else {  
  16.         $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");  
  17.           
  18.     }  
  19. };  

 

这个方法可以一次性插入多行，data参数必须是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]这样的数组形式，而且rowid参数也应该设为data参数对象中代表id的field名称。不过，此时的rowid不用必须是colModel中的一部分。
例如：

[javascript] view plaincopyprint?
  1. var addContact = function() {  
  2.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  3.       
  4.     var dataRow = [{      
  5.         id : 99,  
  6.         lastName : "Zhang",  
  7.         firstName : "San",  
  8.         email : "zhang_san@126.com",  
  9.         telNo : "0086-12345678"  
  10.     },  
  11.     {     
  12.         id : 100,  
  13.         lastName : "Li",  
  14.         firstName : "Si",  
  15.         email : "li_si@126.com",  
  16.         telNo : "0086-12345678"  
  17.     },  
  18.     {     
  19.         id : 101,  
  20.         lastName : "Wang",  
  21.         firstName : "Wu",  
  22.         email : "wang_wu@126.com",  
  23.         telNo : "0086-12345678"  
  24.     }];  
  25.       
  26.     if (selectedId) {  
  27.         $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId);  
  28.           
  29.     } else {  
  30.         $("#gridTable").jqGrid("addRowData", "id", dataRow, "first");  
  31.           
  32.     }  
  33. };  

 

注：我测试了一下，一次插入多行的情况下，用于设置插入位置的后两个参数，似乎没有起作用。插入的几行数据都被置于Grid的底端。

 

 

 

4. setRowData

这个方法用于为某行数据设置数据值。执行成功返回true，否则返回false。它具有3个参数：

  • rowid ：更新数据的行id；
  • data ：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的name:value对；
  • cssprop ：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的CSS类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。

例如：

[javascript] view plaincopyprint?
  1. var updateContact = function() {  
  2.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  3.       
  4.     var dataRow = {  
  5.         lastName : "Li",  
  6.         firstName : "Si",  
  7.         email : "li_si@126.com"   
  8.     };  
  9.       
  10.     var cssprop = {  
  11.         color : "#FF0000"  
  12.     };  
  13.       
  14.     $("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);  
  15. };  

 

 

 

5. delRowData

 

这个方法用于删除某行数据。执行成功返回true，否则返回false。具有一个参数rowid，代表要删除的行id。例如：

[javascript] view plaincopyprint?
  1. var deleteContact = function() {  
  2.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  3.       
  4.     $("#gridTable").jqGrid('delRowData', selectedId);  
  5. };  

 

 

 

 

6. setGridParam

 

这个方法与getGridParam对应，用于设置jqGrid的options选项。返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象（name来自jqGrid的options选项名）。某些选项在设置之后需要trigger("reloadGrid")，才能显示出效果。

例如：

[javascript] view plaincopyprint?
  1. var changeGridOptions = function() {  
  2.     $("#gridTable").jqGrid("setGridParam", {  
  3.         rowNum: 50,  
  4.         page: 16  
  5.     }).trigger('reloadGrid');  
  6. };  

 

注：我测试了一下，这个方法对于设置jqGrid的caption选项似乎无效。大概因此有了setCaption方法。

 

 

 

 

7. setGridWidth

 

为Grid动态地设定一个新的宽度。两个参数：

  • new_width ：以px为单位的新宽度值；
  • shrink ：作用与jqGrid的shrinkToFit选项相同；如果此参数未设置，则沿用jqGrid的shrinkToFit选项的值。

 

 

 

8. trigger("reloadGrid")

 

根据当前设置，重新载入Grid表格，即意味着向Server发送一个新的请求。此方法只能用于已经构建好的Grid。此外，此方法不会使对colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。

 

 

 

9. 其他方法

 

除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：
addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等
以及增强模块提供的方法，例如：
filterGrid、GridDestroy、GridUnload、setColProp等。

这些方法的具体用法，或浅显易懂，或不是非常常用。都可以参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ），得到具体指示。

 

 

 

10. 额外的考虑

 

在上面介绍的增删改数据行的操作中，jqGrid实际上完成的只是客户端的操作，主要是DOM的更改工作。但是如果传到Server的请求失败了，或者没有得到想要的返回结果，那jqGrid的处理还继续吗？会不会和Server端的数据不同步了呢？
这个问题在下一篇中再讨论吧。

 

 

 

 

 

注： 本篇中介绍的方法在jqGrid的Demo中也有介绍，但是我觉得还是自己的实例看起来更直观，更适合自己理解。

附上代码：

 

javascript部分：

[javascript] view plaincopyprint?
  1. $(function(){  
  2.     // 配置jqGrid组件   
  3.     $("#gridTable").jqGrid({  
  4.         url: "jqGrid01.action",  
  5.         datatype: "json",  
  6.         mtype: "GET",  
  7.         height: 350,  
  8.         width: 600,  
  9.         colModel: [  
  10.               {name:"id",index:"id",label:"编码",width:40},    
  11.               {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false},  
  12.               {name:"firstName",index:"firstName",label:"名",width:80,sortable:false},  
  13.               {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},  
  14.               {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}  
  15.         ],  
  16.         viewrecords: true,  
  17.         rowNum: 15,  
  18.         rowList: [15,50,100],  
  19.         prmNames: {search: "search"},  
  20.         jsonReader: {  
  21.             root:"gridModel",  
  22.             records: "record",  
  23.             repeatitems : false  
  24.         },  
  25.         pager: "#gridPager",  
  26.         caption: "联系人列表",  
  27.         hidegrid: false,  
  28.         shrikToFit: true  
  29.     });  
  30. });  
  31. var echoSelRow = function() {  
  32.     var id = $("#gridTable").jqGrid("getGridParam", "selrow");  
  33.       
  34.     alert("当前选中行ID：" + id);  
  35. };  
  36. var getContact = function() {  
  37.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  38.       
  39.     var rowData = $("#gridTable").jqGrid("getRowData", selectedId);  
  40.       
  41.     alert("First Name: " + rowData.firstName);  
  42. };  
  43. var addContact = function() {  
  44.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  45.       
  46.     var dataRow = {   
  47.         id : 99,  
  48.         lastName : "Zhang",  
  49.         firstName : "San",  
  50.         email : "zhang_san@126.com",  
  51.         telNo : "0086-12345678"  
  52.     };  
  53.       
  54.     if (selectedId) {  
  55.         $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);  
  56.           
  57.     } else {  
  58.         $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");  
  59.           
  60.     }  
  61. };  
  62. var updateContact = function() {  
  63.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  64.       
  65.     var dataRow = {  
  66.         lastName : "Li",  
  67.         firstName : "Si",  
  68.         email : "li_si@126.com"   
  69.     };  
  70.       
  71.     var cssprop = {  
  72.         color : "#FF0000"  
  73.     };  
  74.       
  75.     $("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);  
  76. };  
  77. var deleteContact = function() {  
  78.     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");  
  79.       
  80.     $("#gridTable").jqGrid('delRowData', selectedId);  
  81. };  
  82. var changeGridOptions = function() {  
  83.     $("#gridTable").jqGrid("setGridParam", {  
  84.         rowNum: 50,  
  85.         page: 16  
  86.     }).trigger('reloadGrid');  
  87.       
  88.     $("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid');  
  89.       
  90.     alert($("#gridTable").jqGrid("getGridParam", "caption"));  
  91.     alert($("#gridTable").jqGrid("getGridParam", "rowNum"));  
  92. };  
  93. var resetWidth = function() {  
  94.     $("#gridTable").jqGrid("setGridWidth", 300, false);  
  95. };  

 

 

html部分：

[xhtml] view plaincopyprint?
  1. <!DOCTYPE html  
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">  
  5.     <head>  
  6.         <title>jqGrid02</title>  
  7.         <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/jquery-ui-1.8.1.custom.css" mce_href="css/themes/aero/jquery-ui-1.8.1.custom.css" />  
  8.         <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/ui.jqgrid.custom.css" mce_href="css/themes/aero/ui.jqgrid.custom.css" />  
  9.           
  10.         <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>  
  11.         <mce:script src="../js/jquery-ui-1.8.1.custom.min.js" mce_src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></mce:script>  
  12.         <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>  
  13.         <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>  
  14.           
  15.         <mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>    
  16.     </head>  
  17.     <body>  
  18.         <h3>  
  19.             jqGrid测试 02  
  20.         </h3>  
  21.         <div>  
  22.             <table id="gridTable"></table>  
  23.             <div id="gridPager"></div>  
  24.         </div>  
  25.           
  26.         <br />  
  27.           
  28.         <div>  
  29.             <button onclick="echoSelRow()">当前行ID</button>  
  30.             <button onclick="getContact()">当前联系人</button>  
  31.             <button onclick="addContact()">添加行</button>  
  32.             <button onclick="updateContact()">修改行</button>  
  33.             <button onclick="deleteContact()">删除行</button>  
  34.             <button onclick="changeGridOptions()">改变Grid选项</button>  
  35.             <button onclick="resetWidth()">改变Grid宽度</button>  
  36.         </div>  
  37.     </body>  
  38. </html>  

 

 

 

北大青鸟it职业教育 北大青鸟it职业教育
原创粉丝点击
热门IT博客
淘宝客服语气词的使用淘宝客服语气词的使用
linux smb服务器搭建linux smb服务器搭建
英孚网络课程
hp打印机驱动for mac
淘宝上婴儿面膜怎么样
免费动漫下载软件
千牛怎么查买家淘宝号
mac office 2011 汉化
东莞证券财富通mac版
python语言是什么
融资租赁软件市场
皖南和皖北的差距知乎
七天网络手机登录入口
拆电极和编程谁更难
阿里云服务器个人
我的世界0.15.0暮色js
手机淘宝店如何推广
java免费下载
幻灯片演示软件
西门子编程电揽电源
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 美型妖精大混战图片 美型妖精大作战 美型妖精 美型 远大美域 美域 美域中央 美域高 美基 美基 汽车贴膜 美基车膜怎么样 美基车膜 微针美塑有什么作用 塑美极效果好吗 塑美极 三代 美塑微针疗法 塑美极价格要多少 塑美极整形医院 塑美极第五代 塑美颜 无针美塑多少钱 微针美塑做几次 微针美塑多少钱一次 美塑 塑美 美塑美容 美声 特美声音响 美声歌唱家 美声是什么 什么是美声 如何唱美声 美声软件 美声高音 特美声音响怎么连接蓝牙 如何练习美声 女高音美声歌曲 怎样学美声唱法 经典美声歌曲 美声歌曲经典曲目 高音吧

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里