jqGrid与Struts2的结合应用（四） —— 丰富多彩的Pager Bar

在介绍排序与查询之前，先介绍一下Pager、Navigator和自定义按钮。

默认情况下，Pager Bar分为3个部分：

• 页码栏区域（Pager）
• 导航按钮区域（Navigator Buttons）
• 记录信息区域（Record Information）

1. Pager和Record Information的常用属性

在jqGrid的options选项中，有许多是专门针对Pager的，之前的例子中已经使用了一个——“pager”选项，用来指明Pager Bar在页面中对应的区域。

主要的属性有：

• pager ：必须是一个有效的html元素。这个元素可以根据页面的需要，被放置于页面的任何位置。在指定pager选项的值的时候，可以使用三种形式：'pager'、'#pager'、$('#pager')。但推荐使用第二种，即'#pager'。
• pgbuttons ：决定在Pager Bar里是否显示用于翻页的按键，默认为true。
• pginput ：决定在Pager Bar里是否显示用于输入目标页码的输入框，默认为true。
• pgtext ：显示当前页码状态的字符串，这个与所选用的language文件有关，具体的文本格式定义在里面。例如默认的英文格式就是“Page {0} of {1}”，其中{0}代表当前载入的页码；{1}代表页码的总数。
• pagerpos ：用于定义页码栏在Pager Bar中的位置，默认情况下为center，还可以是left或right。
• rowNum ：定义一次性显示多少条记录，默认值为20；这个选项在第一篇文章中已经介绍过了。
• rowList ：定义rowNum可供选择的值的数组，默认值为空数组；这个选项在第一篇文章中也已经介绍过了。
• lastpage ：只读属性，返回页码总数，也即从response中解析出来的那个对应着“total”项的值（参见第一篇文章jsonReader部分）。
• viewrecords ：定义是否在Pager Bar中显示记录数信息。
• recordpos ：用于定义记录信息在Pager Bar中的显示位置，默认为right，还可以是left或center。
• records ：只读属性，返回记录总数，也即从response中解析出来的那个对应着“record”项的值（参见第一篇文章jsonReader部分）。
• recordtext ：记录信息显示时所使用的文本格式，只有当viewrecords为true，且记录总数大于0的时候才会显示。其格式与所选用的language文件有关，具体的文本格式定义在里面。例如默认的英文格式就是“View {0} - {1} of {2}”，其中{0}代表当前页第一条记录在整个记录总数中的位置；{1}代表当前页最后一条记录在整个记录总数中的位置；{2}代表所有记录的总数。

注1：这些属性（选项），并不都是可以用jqGrid的setGridParam方法在初始化之后改变值的。比如pgtext、recordtext、rowNum就是可以修改的，而其余的都是不能修改的，也即只能使用默认值，或者在jqGrid初始化的时候就定义好了。
注2：在jqGrid创建并初始化之后，修改这些关于Pager的属性，都必须执行trigger("reloadGrid")才能生效。
注3：在第一篇文章中我曾写到，经过测试jqGrid的caption似乎也不能用setGridParam方法改变并生效。我再次查了一下文档，发现这个选项也明确标注着也是不能改变，除非使用相应的setCaption方法。

2. Navigator

默认有6个预定义好的按钮：

• 添加新行
• 编辑选中的行
• 查看选中的行
• 删除选中的行
• 查找记录
• 重载表格

Navigator通过navGrid方法来配置导航栏，用法是：

$("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

或

$("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

关于各种参数的具体说明，请参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

2.1 关于Navigator的参数

• add ：定义是否启用添加操作的按钮；
• addicon ：用于添加操作的按钮上的图标，目前只能使用jQuery UI中的图标样式；
• addtext ：用于添加操作的按钮上的文本；
• addtitle ：用于添加操作的按钮上的tooltip；
• del/delicon/deltext/deltitle ：用于删除按钮的一套属性，可以参照添加按钮的几个属性；
• edit/editicon/edittext/edittitle ：用于编辑按钮的一套属性，可以参照添加按钮的几个属性；
• refresh/refreshicon/refreshtext/refreshtitle ：用于刷新表格按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将执行trigger("reloadGrid")并清除用于查询的参数；
• refreshstate ：定义如何重新载入Grid表格，firstpage：重新载入表格的第一页；current：重新载入当前页，并保存当前选中的行；默认为firstpage；
• afterRefresh ：定义点击刷新表格按钮之后的事件函数；
• beforeRefresh ：定义点击刷新表格按钮之前的事件函数；
• search/searchicon/searchtext/searchtitle ：用于查询按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将会调用searchGrid方法；
• view/viewicon/viewtext/viewtitle ：用于查看记录按钮的一套属性，可以参照添加按钮的几个属性；
• addfunc ：如果定义，则用定义的函数替代原有的add函数，这个函数将不接受任何参数；
• editfunc ：如果定义，则用定义的函数替代原有的edit函数，编辑的行的id作为参数传入这个函数；
• delfunc ：如果定义，则用定义的函数替代原有的del函数，编辑的行的id作为参数传入这个函数；
• alertcap ：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示框的标题；
• alerttext ：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息；
• cloneToTop ：定义是否“拷贝”一套导航按钮到Grid表格顶端的Pager中，默认为false；

借助这些选项，可以将上一篇中的例子，修改一下，更多的借助jqGrid内置的功能。例如，当载入行数据到对话框时，之前是通过在自定义的loadSelectedRowData方法中，调用jqGrid("getGridParam", "selrow")来检查是否有选中的数据行。现在在点击编辑或删除按钮的时候，可以通过jqGrid自己检查是否有选中的数据行，如果没有则弹出提示。如果有则选中的行，则还会将行id作为参数，传入对应的函数方法中。

将代码修改如下：

[javascript] view plain copy print ?

1. $(function(){
2. ...
4. $("#gridTable").jqGrid("navGrid","#gridPager",{
5. addfunc:openDialog4Adding,//(1)点击添加按钮，则调用openDialog4Adding方法
6. editfunc:openDialog4Updating,//(2)点击编辑按钮，则调用openDialog4Updating方法
7. delfunc:openDialog4Deleting,//(3)点击删除按钮，则调用openDialog4Deleting方法
8. alerttext:"请选择需要操作的数据行!"//(4)当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
9. });
11. ...
12. });
13. varopenDialog4Adding=function(){
14. varconsoleDlg=$("#consoleDlg");
15. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
16. consoleDlg.find("input").removeAttr("disabled").val("");
17. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
18. dialogButtonPanel.find("button:contains('创建')").show();
19. consoleDlg.dialog("option","title","创建新联系人").dialog("open");
20. };
21. varopenDialog4Updating=function(rowid){//(6)接受选中行的id为参数
22. varconsoleDlg=$("#consoleDlg");
23. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
25. consoleDlg.find("input").removeAttr("disabled");
26. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
27. dialogButtonPanel.find("button:contains('保存')").show();
28. consoleDlg.dialog("option","title","修改联系人信息");
30. loadSelectedRowData(rowid);//(7)将选中行id传入loadSelectedRowData方法
31. };
32. varopenDialog4Deleting=function(rowid){//(8)接受选中行的id为参数
33. varconsoleDlg=$("#consoleDlg");
34. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
36. consoleDlg.find("input").attr("disabled",true);
37. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
38. dialogButtonPanel.find("button:contains('删除')").show();
39. consoleDlg.dialog("option","title","删除联系人");
41. loadSelectedRowData(rowid);
42. };
43. varloadSelectedRowData=function(selectedRowId){//(9)接受选中行的id为参数
45. varparams={
46. "contact.id":selectedRowId
47. };
48. varactionUrl="viewContact.action";
49. //从Server读取对应ID的JSON数据
50. $.ajax({
51. url:actionUrl,
52. data:params,
53. dataType:"json",
54. cache:false,
55. error:function(textStatus,errorThrown){
56. alert("系统ajax交互错误:"+textStatus);
57. },
58. success:function(data,textStatus){
59. //如果读取结果成功，则将信息载入到对话框中
60. varrowData=data.contact;
61. varconsoleDlg=$("#consoleDlg");
62. consoleDlg.find("#selectId").val(rowData.id);
63. consoleDlg.find("#lastName").val(rowData.lastName);
64. consoleDlg.find("#firstName").val(rowData.firstName);
65. consoleDlg.find("#certificateNo").val(rowData.certificateNo);
66. consoleDlg.find("#email").val(rowData.email);
67. consoleDlg.find("#telNo").val(rowData.telNo);
68. consoleDlg.find("#address").val(rowData.address);
69. consoleDlg.find("#idCardNo").val(rowData.idCardNo);
70. consoleDlg.find("#nationality").val(rowData.nationality);
72. //根据新载入的数据将表格中的对应数据行一并刷新一下
73. vardataRow={
74. id:rowData.id,
75. lastName:rowData.lastName,
76. firstName:rowData.firstName,
77. email:rowData.email,
78. telNo:rowData.telNo
79. };
81. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
83. //打开对话框
84. consoleDlg.dialog("open");
85. }
86. });
87. };

$(function(){ ... $("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法 editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法 delfunc : openDialog4Deleting, // (3) 点击删除按钮，则调用openDialog4Deleting方法 alerttext : "请选择需要操作的数据行!" // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息 }); ... }); var openDialog4Adding = function() { var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled").val(""); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('创建')").show(); consoleDlg.dialog("option", "title", "创建新联系人").dialog("open"); }; var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled"); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('保存')").show(); consoleDlg.dialog("option", "title", "修改联系人信息"); loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法 }; var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").attr("disabled", true); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('删除')").show(); consoleDlg.dialog("option", "title", "删除联系人"); loadSelectedRowData(rowid); }; var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数 var params = { "contact.id" : selectedRowId }; var actionUrl = "viewContact.action"; // 从Server读取对应ID的JSON数据 $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { // 如果读取结果成功，则将信息载入到对话框中 var rowData = data.contact; var consoleDlg = $("#consoleDlg"); consoleDlg.find("#selectId").val(rowData.id); consoleDlg.find("#lastName").val(rowData.lastName); consoleDlg.find("#firstName").val(rowData.firstName); consoleDlg.find("#certificateNo").val(rowData.certificateNo); consoleDlg.find("#email").val(rowData.email); consoleDlg.find("#telNo").val(rowData.telNo); consoleDlg.find("#address").val(rowData.address); consoleDlg.find("#idCardNo").val(rowData.idCardNo); consoleDlg.find("#nationality").val(rowData.nationality); // 根据新载入的数据将表格中的对应数据行一并刷新一下 var dataRow = { id : rowData.id, lastName : rowData.lastName, firstName : rowData.firstName, email : rowData.email, telNo : rowData.telNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); // 打开对话框 consoleDlg.dialog("open"); } }); };

说明：(2)(3)处意味着，当点击编辑或删除按钮时，如果有数据行被选中，则将行id作为参数传入对应的openDialog4Updating和openDialog4Deleting方法中；如果没有选中的行，则将弹出窗口，提示信息。

2.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数

jqGrid本身为这些参数定义了默认值，而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值，以覆盖默认的值。

例如：

[javascript] view plain copy print ?

1. $("#gridTable").jqGrid("navGrid","#gridPager",
2. {
3. addfunc:openDialog4Adding,
4. editfunc:openDialog4Updating,
5. delfunc:openDialog4Deleting,
6. alerttext:"请选择需要操作的数据行!"
7. },
8. {},//prmEdit
9. {},//prmAdd
10. {},//prmDel
11. {//prmSearch
12. caption:"查找",
13. Find:"Let'sgo!",
14. multipleSearch:true
15. },
16. {}//prmView
17. );

$("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, editfunc : openDialog4Updating, delfunc : openDialog4Deleting, alerttext : "请选择需要操作的数据行!" }, {}, // prmEdit {}, // prmAdd {}, // prmDel { // prmSearch caption: "查找", Find: "Let's go!", multipleSearch : true }, {} // prmView );

具体的参数如下，也可参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

[javascript] view plain copy print ?

1. $.jgrid={
2. ...
3. search:{
4. caption:"Search...",
5. Find:"Find",
6. Reset:"Reset",
7. odata:['equal','notequal','less','lessorequal','greater','greaterorequal','beginswith','doesnotbeginwith','isin','isnotin','endswith','doesnotendwith','contains','doesnotcontain'],
8. groupOps:[{op:"AND",text:"all"},{op:"OR",text:"any"}],
9. matchText:"match",
10. rulesText:"rules"
11. },
12. edit:{
13. addCaption:"AddRecord",
14. editCaption:"EditRecord",
15. bSubmit:"Submit",
16. bCancel:"Cancel",
17. bClose:"Close",
18. saveData:"Datahasbeenchanged!Savechanges?",
19. bYes:"Yes",
20. bNo:"No",
21. bExit:"Cancel",
22. },
23. view:{
24. caption:"ViewRecord",
25. bClose:"Close"
26. },
27. del:{
28. caption:"Delete",
29. msg:"Deleteselectedrecord(s)?",
30. bSubmit:"Delete",
31. bCancel:"Cancel"
32. },
33. nav:{
34. edittext:"",
35. edittitle:"Editselectedrow",
36. addtext:"",
37. addtitle:"Addnewrow",
38. deltext:"",
39. deltitle:"Deleteselectedrow",
40. searchtext:"",
41. searchtitle:"Findrecords",
42. refreshtext:"",
43. refreshtitle:"ReloadGrid",
44. alertcap:"Warning",
45. alerttext:"Please,selectrow",
46. viewtext:"",
47. viewtitle:"Viewselectedrow"
48. },
49. ...

$.jgrid = { ... search : { caption: "Search...", Find: "Find", Reset: "Reset", odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], matchText: " match", rulesText: " rules" }, edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", }, view : { caption: "View Record", bClose: "Close" }, del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, nav : { edittext: "", edittitle: "Edit selected row", addtext:"", addtitle: "Add new row", deltext: "", deltitle: "Delete selected row", searchtext: "", searchtitle: "Find records", refreshtext: "", refreshtitle: "Reload Grid", alertcap: "Warning", alerttext: "Please, select row", viewtext: "", viewtitle: "View selected row" }, ...

3. 自定义按钮

jqGrid还允许将自定义的按钮加入Page Bar，具体API是：

$("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});

或者

$("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});

关于navButtonAdd的属性：

• caption ：按钮上的文本，可以是空值；
• buttonicon ：按钮上的图标，如果设为“none”，则只显示按钮上的文本；
• onClickButton ：当点击按钮时所调用的方法函数，默认为null；
• position ：添加新按钮的位置，first或last；默认为last；
• title ：新按钮的tooltip
• cursor ：当鼠标滑过按钮时的光标样式，默认为pointer；
• id ：为按钮设置id。

4. 自定义分隔符

$("#grid_id").navSeparatorAdd('#pager',{separator_parameters});

相关属性：

• sepclass ：分隔符的CSS样式；
• sepcontent ：分隔符中的内容；

附：相关代码

javascript部分：

[javascript] view plain copy print ?

1. $(function(){
2. //配置jqGrid组件
3. $("#gridTable").jqGrid({
4. url:"jqGrid03.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. });
31. varalertText="<divstyle="margin:0.3em;background:#FFFFFF;border:1pxsolid#A6C9E2;padding:0.5em;"mce_style="margin:0.3em;background:#FFFFFF;border:1pxsolid#A6C9E2;padding:0.5em;">请选择需要操作的数据行!</div>";
33. $("#gridTable").jqGrid("navGrid","#gridPager",{
34. addfunc:openDialog4Adding,//(1)点击添加按钮，则调用openDialog4Adding方法
35. editfunc:openDialog4Updating,//(2)点击添加按钮，则调用openDialog4Updating方法
36. delfunc:openDialog4Deleting,//(3)点击添加按钮，则调用openDialog4Deleting方法
37. alerttext:alertText//(4)当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
38. },{},{},{},{//(5)修改于查询相关的prmSearch参数
39. caption:"查找",
40. Find:"Let'sgo!",
41. multipleSearch:true,
42. groupOps:[{op:"AND",text:"全部"}],
43. },{});
45. //配置对话框
46. $("#consoleDlg").dialog({
47. autoOpen:false,
48. modal:true,//设置对话框为模态（modal）对话框
49. resizable:true,
50. width:480,
51. buttons:{//为对话框添加按钮
52. "取消":function(){$("#consoleDlg").dialog("close")},
53. "创建":addContact,
54. "保存":updateContact,
55. "删除":deleteContact
56. }
57. });
58. });
59. varopenDialog4Adding=function(){
60. varconsoleDlg=$("#consoleDlg");
61. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
62. consoleDlg.find("input").removeAttr("disabled").val("");
63. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
64. dialogButtonPanel.find("button:contains('创建')").show();
65. consoleDlg.dialog("option","title","创建新联系人").dialog("open");
66. };
67. varopenDialog4Updating=function(rowid){//(6)接受选中行的id为参数
68. varconsoleDlg=$("#consoleDlg");
69. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
71. consoleDlg.find("input").removeAttr("disabled");
72. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
73. dialogButtonPanel.find("button:contains('保存')").show();
74. consoleDlg.dialog("option","title","修改联系人信息");
76. loadSelectedRowData(rowid);//(7)将选中行id传入loadSelectedRowData方法
77. }
78. varopenDialog4Deleting=function(rowid){//(8)接受选中行的id为参数
79. varconsoleDlg=$("#consoleDlg");
80. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
82. consoleDlg.find("input").attr("disabled",true);
83. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
84. dialogButtonPanel.find("button:contains('删除')").show();
85. consoleDlg.dialog("option","title","删除联系人");
87. loadSelectedRowData(rowid);
88. }
89. varloadSelectedRowData=function(selectedRowId){//(9)接受选中行的id为参数
90. varparams={
91. "contact.id":selectedRowId
92. };
93. varactionUrl="viewContact.action";
94. //从Server读取对应ID的JSON数据
95. $.ajax({
96. url:actionUrl,
97. data:params,
98. dataType:"json",
99. cache:false,
100. error:function(textStatus,errorThrown){
101. alert("系统ajax交互错误:"+textStatus);
102. },
103. success:function(data,textStatus){
104. //如果读取结果成功，则将信息载入到对话框中
105. varrowData=data.contact;
106. varconsoleDlg=$("#consoleDlg");
107. consoleDlg.find("#selectId").val(rowData.id);
108. consoleDlg.find("#lastName").val(rowData.lastName);
109. consoleDlg.find("#firstName").val(rowData.firstName);
110. consoleDlg.find("#certificateNo").val(rowData.certificateNo);
111. consoleDlg.find("#email").val(rowData.email);
112. consoleDlg.find("#telNo").val(rowData.telNo);
113. consoleDlg.find("#address").val(rowData.address);
114. consoleDlg.find("#idCardNo").val(rowData.idCardNo);
115. consoleDlg.find("#nationality").val(rowData.nationality);
117. //根据新载入的数据将表格中的对应数据行一并刷新一下
118. vardataRow={
119. id:rowData.id,
120. lastName:rowData.lastName,
121. firstName:rowData.firstName,
122. email:rowData.email,
123. telNo:rowData.telNo
124. };
126. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
128. //打开对话框
129. consoleDlg.dialog("open");
130. }
131. });
132. };
133. varaddContact=function(){
134. varconsoleDlg=$("#consoleDlg");
136. varpLastName=$.trim(consoleDlg.find("#lastName").val());
137. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
138. varpEmail=$.trim(consoleDlg.find("#email").val());
139. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
140. varpAddress=$.trim(consoleDlg.find("#address").val());
141. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
142. varpNationality=$.trim(consoleDlg.find("#nationality").val());
144. varparams={
145. "contact.lastName":pLastName,
146. "contact.firstName":pFirstName,
147. "contact.email":pEmail,
148. "contact.telNo":pTelNo,
149. "contact.address":pAddress,
150. "contact.idCardNo":pIdCardNo,
151. "contact.nationality":pNationality
152. };
154. varactionUrl="createContact.action"
156. $.ajax({
157. url:actionUrl,
158. data:params,
159. dataType:"json",
160. cache:false,
161. error:function(textStatus,errorThrown){
162. alert("系统ajax交互错误:"+textStatus);
163. },
164. success:function(data,textStatus){
165. if(data.ajaxResult=="success"){
166. vardataRow={
167. id:data.contact.id,//从Server端得到系统分配的id
168. lastName:pLastName,
169. firstName:pFirstName,
170. email:pEmail,
171. telNo:pTelNo
172. };
174. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");
176. if(srcrowid){
177. $("#gridTable").jqGrid("addRowData",data.contact.id,dataRow,"before",srcrowid);
178. }else{
179. $("#gridTable").jqGrid("addRowData",data.contact.id,dataRow,"first");
180. }
181. consoleDlg.dialog("close");
183. alert("联系人添加操作成功!");
185. }else{
186. alert("添加操作失败!");
187. }
188. }
189. });
190. };
191. varupdateContact=function(){
192. varconsoleDlg=$("#consoleDlg");
194. varpId=$.trim(consoleDlg.find("#selectId").val());
195. varpLastName=$.trim(consoleDlg.find("#lastName").val());
196. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
197. varpEmail=$.trim(consoleDlg.find("#email").val());
198. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
199. varpAddress=$.trim(consoleDlg.find("#address").val());
200. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
201. varpNationality=$.trim(consoleDlg.find("#nationality").val());
202. varparams={
203. "contact.id":pId,
204. "contact.lastName":pLastName,
205. "contact.firstName":pFirstName,
206. "contact.email":pEmail,
207. "contact.telNo":pTelNo,
208. "contact.address":pAddress,
209. "contact.idCardNo":pIdCardNo,
210. "contact.nationality":pNationality
211. };
212. varactionUrl="updateContact.action";
213. $.ajax({
214. url:actionUrl,
215. data:params,
216. dataType:"json",
217. cache:false,
218. error:function(textStatus,errorThrown){
219. alert("系统ajax交互错误:"+textStatus);
220. },
221. success:function(data,textStatus){
222. if(data.ajaxResult=="success"){
223. vardataRow={
224. id:data.contact.id,
225. lastName:pLastName,
226. firstName:pFirstName,
227. email:pEmail,
228. telNo:pTelNo
229. };
230. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow,{color:"#FF0000"});
232. alert("联系人信息更新成功!");
234. consoleDlg.dialog("close");
236. }else{
237. alert("修改操作失败!");
238. }
239. }
240. });
241. };
242. vardeleteContact=function(){
243. varconsoleDlg=$("#consoleDlg");
245. varpId=$.trim(consoleDlg.find("#selectId").val());
246. varparams={
247. "contact.id":pId
248. };
249. varactionUrl="deleteContact.action";
250. $.ajax({
251. url:actionUrl,
252. data:params,
253. dataType:"json",
254. cache:false,
255. error:function(textStatus,errorThrown){
256. alert("系统ajax交互错误:"+textStatus);
257. },
258. success:function(data,textStatus){
259. if(data.ajaxResult=="success"){
260. $("#gridTable").jqGrid("delRowData",pId);
262. consoleDlg.dialog("close");
263. alert("联系人删除成功!");
264. }else{
265. alert("删除操作失败!");
266. }
267. }
268. });
269. };

$(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid03.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); var alertText = "<div style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;" mce_style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;">请选择需要操作的数据行!</div>"; $("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法 editfunc : openDialog4Updating, // (2) 点击添加按钮，则调用openDialog4Updating方法 delfunc : openDialog4Deleting, // (3) 点击添加按钮，则调用openDialog4Deleting方法 alerttext : alertText // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息 },{},{},{},{ // (5) 修改于查询相关的prmSearch参数 caption: "查找", Find: "Let's go!", multipleSearch: true, groupOps: [{ op: "AND", text: "全部" }], },{}); // 配置对话框 $("#consoleDlg").dialog({ autoOpen: false, modal: true, // 设置对话框为模态（modal）对话框 resizable: true, width: 480, buttons: { // 为对话框添加按钮 "取消": function() {$("#consoleDlg").dialog("close")}, "创建": addContact, "保存": updateContact, "删除": deleteContact } }); }); var openDialog4Adding = function() { var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled").val(""); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('创建')").show(); consoleDlg.dialog("option", "title", "创建新联系人").dialog("open"); }; var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled"); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('保存')").show(); consoleDlg.dialog("option", "title", "修改联系人信息"); loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法 } var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").attr("disabled", true); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('删除')").show(); consoleDlg.dialog("option", "title", "删除联系人"); loadSelectedRowData(rowid); } var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数 var params = { "contact.id" : selectedRowId }; var actionUrl = "viewContact.action"; // 从Server读取对应ID的JSON数据 $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { // 如果读取结果成功，则将信息载入到对话框中 var rowData = data.contact; var consoleDlg = $("#consoleDlg"); consoleDlg.find("#selectId").val(rowData.id); consoleDlg.find("#lastName").val(rowData.lastName); consoleDlg.find("#firstName").val(rowData.firstName); consoleDlg.find("#certificateNo").val(rowData.certificateNo); consoleDlg.find("#email").val(rowData.email); consoleDlg.find("#telNo").val(rowData.telNo); consoleDlg.find("#address").val(rowData.address); consoleDlg.find("#idCardNo").val(rowData.idCardNo); consoleDlg.find("#nationality").val(rowData.nationality); // 根据新载入的数据将表格中的对应数据行一并刷新一下 var dataRow = { id : rowData.id, lastName : rowData.lastName, firstName : rowData.firstName, email : rowData.email, telNo : rowData.telNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); // 打开对话框 consoleDlg.dialog("open"); } }); }; var addContact = function() { var consoleDlg = $("#consoleDlg"); var pLastName = $.trim(consoleDlg.find("#lastName").val()); var pFirstName = $.trim(consoleDlg.find("#firstName").val()); var pEmail = $.trim(consoleDlg.find("#email").val()); var pTelNo = $.trim(consoleDlg.find("#telNo").val()); var pAddress = $.trim(consoleDlg.find("#address").val()); var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); var pNationality = $.trim(consoleDlg.find("#nationality").val()); var params = { "contact.lastName" : pLastName, "contact.firstName" : pFirstName, "contact.email" : pEmail, "contact.telNo" : pTelNo, "contact.address" : pAddress, "contact.idCardNo" : pIdCardNo, "contact.nationality" : pNationality }; var actionUrl = "createContact.action" $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if(data.ajaxResult == "success") { var dataRow = { id : data.contact.id, // 从Server端得到系统分配的id lastName : pLastName, firstName : pFirstName, email : pEmail, telNo : pTelNo }; var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow"); if(srcrowid) { $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "before", srcrowid); } else { $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "first"); } consoleDlg.dialog("close"); alert("联系人添加操作成功!"); } else { alert("添加操作失败!"); } } }); }; var updateContact = function() { var consoleDlg = $("#consoleDlg"); var pId = $.trim(consoleDlg.find("#selectId").val()); var pLastName = $.trim(consoleDlg.find("#lastName").val()); var pFirstName = $.trim(consoleDlg.find("#firstName").val()); var pEmail = $.trim(consoleDlg.find("#email").val()); var pTelNo = $.trim(consoleDlg.find("#telNo").val()); var pAddress = $.trim(consoleDlg.find("#address").val()); var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); var pNationality = $.trim(consoleDlg.find("#nationality").val()); var params = { "contact.id" : pId, "contact.lastName" : pLastName, "contact.firstName" : pFirstName, "contact.email" : pEmail, "contact.telNo" : pTelNo, "contact.address" : pAddress, "contact.idCardNo" : pIdCardNo, "contact.nationality" : pNationality }; var actionUrl = "updateContact.action"; $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if (data.ajaxResult == "success") { var dataRow = { id : data.contact.id, lastName : pLastName, firstName : pFirstName, email : pEmail, telNo : pTelNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow, {color:"#FF0000"}); alert("联系人信息更新成功!"); consoleDlg.dialog("close"); } else { alert("修改操作失败!"); } } }); }; var deleteContact = function() { var consoleDlg = $("#consoleDlg"); var pId = $.trim(consoleDlg.find("#selectId").val()); var params = { "contact.id" : pId }; var actionUrl = "deleteContact.action"; $.ajax({ url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if (data.ajaxResult == "success") { $("#gridTable").jqGrid("delRowData", pId); consoleDlg.dialog("close"); alert("联系人删除成功!"); } else { alert("删除操作失败!"); } } }); };

在介绍排序与查询之前，先介绍一下Pager、Navigator和自定义按钮。

默认情况下，Pager Bar分为3个部分：

• 页码栏区域（Pager）
• 导航按钮区域（Navigator Buttons）
• 记录信息区域（Record Information）

1. Pager和Record Information的常用属性

在jqGrid的options选项中，有许多是专门针对Pager的，之前的例子中已经使用了一个——“pager”选项，用来指明Pager Bar在页面中对应的区域。

主要的属性有：

• pager ：必须是一个有效的html元素。这个元素可以根据页面的需要，被放置于页面的任何位置。在指定pager选项的值的时候，可以使用三种形式：'pager'、'#pager'、$('#pager')。但推荐使用第二种，即'#pager'。
• pgbuttons ：决定在Pager Bar里是否显示用于翻页的按键，默认为true。
• pginput ：决定在Pager Bar里是否显示用于输入目标页码的输入框，默认为true。
• pgtext ：显示当前页码状态的字符串，这个与所选用的language文件有关，具体的文本格式定义在里面。例如默认的英文格式就是“Page {0} of {1}”，其中{0}代表当前载入的页码；{1}代表页码的总数。
• pagerpos ：用于定义页码栏在Pager Bar中的位置，默认情况下为center，还可以是left或right。
• rowNum ：定义一次性显示多少条记录，默认值为20；这个选项在第一篇文章中已经介绍过了。
• rowList ：定义rowNum可供选择的值的数组，默认值为空数组；这个选项在第一篇文章中也已经介绍过了。
• lastpage ：只读属性，返回页码总数，也即从response中解析出来的那个对应着“total”项的值（参见第一篇文章jsonReader部分）。
• viewrecords ：定义是否在Pager Bar中显示记录数信息。
• recordpos ：用于定义记录信息在Pager Bar中的显示位置，默认为right，还可以是left或center。
• records ：只读属性，返回记录总数，也即从response中解析出来的那个对应着“record”项的值（参见第一篇文章jsonReader部分）。
• recordtext ：记录信息显示时所使用的文本格式，只有当viewrecords为true，且记录总数大于0的时候才会显示。其格式与所选用的language文件有关，具体的文本格式定义在里面。例如默认的英文格式就是“View {0} - {1} of {2}”，其中{0}代表当前页第一条记录在整个记录总数中的位置；{1}代表当前页最后一条记录在整个记录总数中的位置；{2}代表所有记录的总数。

注1：这些属性（选项），并不都是可以用jqGrid的setGridParam方法在初始化之后改变值的。比如pgtext、recordtext、rowNum就是可以修改的，而其余的都是不能修改的，也即只能使用默认值，或者在jqGrid初始化的时候就定义好了。
注2：在jqGrid创建并初始化之后，修改这些关于Pager的属性，都必须执行trigger("reloadGrid")才能生效。
注3：在第一篇文章中我曾写到，经过测试jqGrid的caption似乎也不能用setGridParam方法改变并生效。我再次查了一下文档，发现这个选项也明确标注着也是不能改变，除非使用相应的setCaption方法。

2. Navigator

默认有6个预定义好的按钮：

• 添加新行
• 编辑选中的行
• 查看选中的行
• 删除选中的行
• 查找记录
• 重载表格

Navigator通过navGrid方法来配置导航栏，用法是：

$("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

或

$("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

关于各种参数的具体说明，请参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

2.1 关于Navigator的参数

• add ：定义是否启用添加操作的按钮；
• addicon ：用于添加操作的按钮上的图标，目前只能使用jQuery UI中的图标样式；
• addtext ：用于添加操作的按钮上的文本；
• addtitle ：用于添加操作的按钮上的tooltip；
• del/delicon/deltext/deltitle ：用于删除按钮的一套属性，可以参照添加按钮的几个属性；
• edit/editicon/edittext/edittitle ：用于编辑按钮的一套属性，可以参照添加按钮的几个属性；
• refresh/refreshicon/refreshtext/refreshtitle ：用于刷新表格按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将执行trigger("reloadGrid")并清除用于查询的参数；
• refreshstate ：定义如何重新载入Grid表格，firstpage：重新载入表格的第一页；current：重新载入当前页，并保存当前选中的行；默认为firstpage；
• afterRefresh ：定义点击刷新表格按钮之后的事件函数；
• beforeRefresh ：定义点击刷新表格按钮之前的事件函数；
• search/searchicon/searchtext/searchtitle ：用于查询按钮的一套属性，可以参照添加按钮的几个属性；当点击这个按钮时，将会调用searchGrid方法；
• view/viewicon/viewtext/viewtitle ：用于查看记录按钮的一套属性，可以参照添加按钮的几个属性；
• addfunc ：如果定义，则用定义的函数替代原有的add函数，这个函数将不接受任何参数；
• editfunc ：如果定义，则用定义的函数替代原有的edit函数，编辑的行的id作为参数传入这个函数；
• delfunc ：如果定义，则用定义的函数替代原有的del函数，编辑的行的id作为参数传入这个函数；
• alertcap ：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示框的标题；
• alerttext ：当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息；
• cloneToTop ：定义是否“拷贝”一套导航按钮到Grid表格顶端的Pager中，默认为false；

借助这些选项，可以将上一篇中的例子，修改一下，更多的借助jqGrid内置的功能。例如，当载入行数据到对话框时，之前是通过在自定义的loadSelectedRowData方法中，调用jqGrid("getGridParam", "selrow")来检查是否有选中的数据行。现在在点击编辑或删除按钮的时候，可以通过jqGrid自己检查是否有选中的数据行，如果没有则弹出提示。如果有则选中的行，则还会将行id作为参数，传入对应的函数方法中。

将代码修改如下：

[javascript] view plain copy print ?

1. $(function(){
2. ...
4. $("#gridTable").jqGrid("navGrid","#gridPager",{
5. addfunc:openDialog4Adding,//(1)点击添加按钮，则调用openDialog4Adding方法
6. editfunc:openDialog4Updating,//(2)点击编辑按钮，则调用openDialog4Updating方法
7. delfunc:openDialog4Deleting,//(3)点击删除按钮，则调用openDialog4Deleting方法
8. alerttext:"请选择需要操作的数据行!"//(4)当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
9. });
11. ...
12. });
13. varopenDialog4Adding=function(){
14. varconsoleDlg=$("#consoleDlg");
15. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
16. consoleDlg.find("input").removeAttr("disabled").val("");
17. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
18. dialogButtonPanel.find("button:contains('创建')").show();
19. consoleDlg.dialog("option","title","创建新联系人").dialog("open");
20. };
21. varopenDialog4Updating=function(rowid){//(6)接受选中行的id为参数
22. varconsoleDlg=$("#consoleDlg");
23. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
25. consoleDlg.find("input").removeAttr("disabled");
26. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
27. dialogButtonPanel.find("button:contains('保存')").show();
28. consoleDlg.dialog("option","title","修改联系人信息");
30. loadSelectedRowData(rowid);//(7)将选中行id传入loadSelectedRowData方法
31. };
32. varopenDialog4Deleting=function(rowid){//(8)接受选中行的id为参数
33. varconsoleDlg=$("#consoleDlg");
34. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
36. consoleDlg.find("input").attr("disabled",true);
37. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
38. dialogButtonPanel.find("button:contains('删除')").show();
39. consoleDlg.dialog("option","title","删除联系人");
41. loadSelectedRowData(rowid);
42. };
43. varloadSelectedRowData=function(selectedRowId){//(9)接受选中行的id为参数
45. varparams={
46. "contact.id":selectedRowId
47. };
48. varactionUrl="viewContact.action";
49. //从Server读取对应ID的JSON数据
50. $.ajax({
51. url:actionUrl,
52. data:params,
53. dataType:"json",
54. cache:false,
55. error:function(textStatus,errorThrown){
56. alert("系统ajax交互错误:"+textStatus);
57. },
58. success:function(data,textStatus){
59. //如果读取结果成功，则将信息载入到对话框中
60. varrowData=data.contact;
61. varconsoleDlg=$("#consoleDlg");
62. consoleDlg.find("#selectId").val(rowData.id);
63. consoleDlg.find("#lastName").val(rowData.lastName);
64. consoleDlg.find("#firstName").val(rowData.firstName);
65. consoleDlg.find("#certificateNo").val(rowData.certificateNo);
66. consoleDlg.find("#email").val(rowData.email);
67. consoleDlg.find("#telNo").val(rowData.telNo);
68. consoleDlg.find("#address").val(rowData.address);
69. consoleDlg.find("#idCardNo").val(rowData.idCardNo);
70. consoleDlg.find("#nationality").val(rowData.nationality);
72. //根据新载入的数据将表格中的对应数据行一并刷新一下
73. vardataRow={
74. id:rowData.id,
75. lastName:rowData.lastName,
76. firstName:rowData.firstName,
77. email:rowData.email,
78. telNo:rowData.telNo
79. };
81. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
83. //打开对话框
84. consoleDlg.dialog("open");
85. }
86. });
87. };

$(function(){ ... $("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法 editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法 delfunc : openDialog4Deleting, // (3) 点击删除按钮，则调用openDialog4Deleting方法 alerttext : "请选择需要操作的数据行!" // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息 }); ... }); var openDialog4Adding = function() { var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled").val(""); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('创建')").show(); consoleDlg.dialog("option", "title", "创建新联系人").dialog("open"); }; var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled"); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('保存')").show(); consoleDlg.dialog("option", "title", "修改联系人信息"); loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法 }; var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").attr("disabled", true); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('删除')").show(); consoleDlg.dialog("option", "title", "删除联系人"); loadSelectedRowData(rowid); }; var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数 var params = { "contact.id" : selectedRowId }; var actionUrl = "viewContact.action"; // 从Server读取对应ID的JSON数据 $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { // 如果读取结果成功，则将信息载入到对话框中 var rowData = data.contact; var consoleDlg = $("#consoleDlg"); consoleDlg.find("#selectId").val(rowData.id); consoleDlg.find("#lastName").val(rowData.lastName); consoleDlg.find("#firstName").val(rowData.firstName); consoleDlg.find("#certificateNo").val(rowData.certificateNo); consoleDlg.find("#email").val(rowData.email); consoleDlg.find("#telNo").val(rowData.telNo); consoleDlg.find("#address").val(rowData.address); consoleDlg.find("#idCardNo").val(rowData.idCardNo); consoleDlg.find("#nationality").val(rowData.nationality); // 根据新载入的数据将表格中的对应数据行一并刷新一下 var dataRow = { id : rowData.id, lastName : rowData.lastName, firstName : rowData.firstName, email : rowData.email, telNo : rowData.telNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); // 打开对话框 consoleDlg.dialog("open"); } }); };

说明：(2)(3)处意味着，当点击编辑或删除按钮时，如果有数据行被选中，则将行id作为参数传入对应的openDialog4Updating和openDialog4Deleting方法中；如果没有选中的行，则将弹出窗口，提示信息。

2.2 关于prmEdit、prmAdd、prmDel、prmSearch、prmView的参数

jqGrid本身为这些参数定义了默认值，而且不同的language文件也有各自的定义来覆盖原始的默认值。我们也可以在jqGrid重新定义新的值，以覆盖默认的值。

例如：

[javascript] view plain copy print ?

1. $("#gridTable").jqGrid("navGrid","#gridPager",
2. {
3. addfunc:openDialog4Adding,
4. editfunc:openDialog4Updating,
5. delfunc:openDialog4Deleting,
6. alerttext:"请选择需要操作的数据行!"
7. },
8. {},//prmEdit
9. {},//prmAdd
10. {},//prmDel
11. {//prmSearch
12. caption:"查找",
13. Find:"Let'sgo!",
14. multipleSearch:true
15. },
16. {}//prmView
17. );

$("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, editfunc : openDialog4Updating, delfunc : openDialog4Deleting, alerttext : "请选择需要操作的数据行!" }, {}, // prmEdit {}, // prmAdd {}, // prmDel { // prmSearch caption: "查找", Find: "Let's go!", multipleSearch : true }, {} // prmView );

具体的参数如下，也可参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

[javascript] view plain copy print ?

1. $.jgrid={
2. ...
3. search:{
4. caption:"Search...",
5. Find:"Find",
6. Reset:"Reset",
7. odata:['equal','notequal','less','lessorequal','greater','greaterorequal','beginswith','doesnotbeginwith','isin','isnotin','endswith','doesnotendwith','contains','doesnotcontain'],
8. groupOps:[{op:"AND",text:"all"},{op:"OR",text:"any"}],
9. matchText:"match",
10. rulesText:"rules"
11. },
12. edit:{
13. addCaption:"AddRecord",
14. editCaption:"EditRecord",
15. bSubmit:"Submit",
16. bCancel:"Cancel",
17. bClose:"Close",
18. saveData:"Datahasbeenchanged!Savechanges?",
19. bYes:"Yes",
20. bNo:"No",
21. bExit:"Cancel",
22. },
23. view:{
24. caption:"ViewRecord",
25. bClose:"Close"
26. },
27. del:{
28. caption:"Delete",
29. msg:"Deleteselectedrecord(s)?",
30. bSubmit:"Delete",
31. bCancel:"Cancel"
32. },
33. nav:{
34. edittext:"",
35. edittitle:"Editselectedrow",
36. addtext:"",
37. addtitle:"Addnewrow",
38. deltext:"",
39. deltitle:"Deleteselectedrow",
40. searchtext:"",
41. searchtitle:"Findrecords",
42. refreshtext:"",
43. refreshtitle:"ReloadGrid",
44. alertcap:"Warning",
45. alerttext:"Please,selectrow",
46. viewtext:"",
47. viewtitle:"Viewselectedrow"
48. },
49. ...

$.jgrid = { ... search : { caption: "Search...", Find: "Find", Reset: "Reset", odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], matchText: " match", rulesText: " rules" }, edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", }, view : { caption: "View Record", bClose: "Close" }, del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, nav : { edittext: "", edittitle: "Edit selected row", addtext:"", addtitle: "Add new row", deltext: "", deltitle: "Delete selected row", searchtext: "", searchtitle: "Find records", refreshtext: "", refreshtitle: "Reload Grid", alertcap: "Warning", alerttext: "Please, select row", viewtext: "", viewtitle: "View selected row" }, ...

3. 自定义按钮

jqGrid还允许将自定义的按钮加入Page Bar，具体API是：

$("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});

或者

$("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});

关于navButtonAdd的属性：

• caption ：按钮上的文本，可以是空值；
• buttonicon ：按钮上的图标，如果设为“none”，则只显示按钮上的文本；
• onClickButton ：当点击按钮时所调用的方法函数，默认为null；
• position ：添加新按钮的位置，first或last；默认为last；
• title ：新按钮的tooltip
• cursor ：当鼠标滑过按钮时的光标样式，默认为pointer；
• id ：为按钮设置id。

4. 自定义分隔符

$("#grid_id").navSeparatorAdd('#pager',{separator_parameters});

相关属性：

• sepclass ：分隔符的CSS样式；
• sepcontent ：分隔符中的内容；

附：相关代码

javascript部分：

[javascript] view plain copy print ?

1. $(function(){
2. //配置jqGrid组件
3. $("#gridTable").jqGrid({
4. url:"jqGrid03.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. });
31. varalertText="<divstyle="margin:0.3em;background:#FFFFFF;border:1pxsolid#A6C9E2;padding:0.5em;"mce_style="margin:0.3em;background:#FFFFFF;border:1pxsolid#A6C9E2;padding:0.5em;">请选择需要操作的数据行!</div>";
33. $("#gridTable").jqGrid("navGrid","#gridPager",{
34. addfunc:openDialog4Adding,//(1)点击添加按钮，则调用openDialog4Adding方法
35. editfunc:openDialog4Updating,//(2)点击添加按钮，则调用openDialog4Updating方法
36. delfunc:openDialog4Deleting,//(3)点击添加按钮，则调用openDialog4Deleting方法
37. alerttext:alertText//(4)当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息
38. },{},{},{},{//(5)修改于查询相关的prmSearch参数
39. caption:"查找",
40. Find:"Let'sgo!",
41. multipleSearch:true,
42. groupOps:[{op:"AND",text:"全部"}],
43. },{});
45. //配置对话框
46. $("#consoleDlg").dialog({
47. autoOpen:false,
48. modal:true,//设置对话框为模态（modal）对话框
49. resizable:true,
50. width:480,
51. buttons:{//为对话框添加按钮
52. "取消":function(){$("#consoleDlg").dialog("close")},
53. "创建":addContact,
54. "保存":updateContact,
55. "删除":deleteContact
56. }
57. });
58. });
59. varopenDialog4Adding=function(){
60. varconsoleDlg=$("#consoleDlg");
61. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
62. consoleDlg.find("input").removeAttr("disabled").val("");
63. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
64. dialogButtonPanel.find("button:contains('创建')").show();
65. consoleDlg.dialog("option","title","创建新联系人").dialog("open");
66. };
67. varopenDialog4Updating=function(rowid){//(6)接受选中行的id为参数
68. varconsoleDlg=$("#consoleDlg");
69. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
71. consoleDlg.find("input").removeAttr("disabled");
72. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
73. dialogButtonPanel.find("button:contains('保存')").show();
74. consoleDlg.dialog("option","title","修改联系人信息");
76. loadSelectedRowData(rowid);//(7)将选中行id传入loadSelectedRowData方法
77. }
78. varopenDialog4Deleting=function(rowid){//(8)接受选中行的id为参数
79. varconsoleDlg=$("#consoleDlg");
80. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
82. consoleDlg.find("input").attr("disabled",true);
83. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
84. dialogButtonPanel.find("button:contains('删除')").show();
85. consoleDlg.dialog("option","title","删除联系人");
87. loadSelectedRowData(rowid);
88. }
89. varloadSelectedRowData=function(selectedRowId){//(9)接受选中行的id为参数
90. varparams={
91. "contact.id":selectedRowId
92. };
93. varactionUrl="viewContact.action";
94. //从Server读取对应ID的JSON数据
95. $.ajax({
96. url:actionUrl,
97. data:params,
98. dataType:"json",
99. cache:false,
100. error:function(textStatus,errorThrown){
101. alert("系统ajax交互错误:"+textStatus);
102. },
103. success:function(data,textStatus){
104. //如果读取结果成功，则将信息载入到对话框中
105. varrowData=data.contact;
106. varconsoleDlg=$("#consoleDlg");
107. consoleDlg.find("#selectId").val(rowData.id);
108. consoleDlg.find("#lastName").val(rowData.lastName);
109. consoleDlg.find("#firstName").val(rowData.firstName);
110. consoleDlg.find("#certificateNo").val(rowData.certificateNo);
111. consoleDlg.find("#email").val(rowData.email);
112. consoleDlg.find("#telNo").val(rowData.telNo);
113. consoleDlg.find("#address").val(rowData.address);
114. consoleDlg.find("#idCardNo").val(rowData.idCardNo);
115. consoleDlg.find("#nationality").val(rowData.nationality);
117. //根据新载入的数据将表格中的对应数据行一并刷新一下
118. vardataRow={
119. id:rowData.id,
120. lastName:rowData.lastName,
121. firstName:rowData.firstName,
122. email:rowData.email,
123. telNo:rowData.telNo
124. };
126. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
128. //打开对话框
129. consoleDlg.dialog("open");
130. }
131. });
132. };
133. varaddContact=function(){
134. varconsoleDlg=$("#consoleDlg");
136. varpLastName=$.trim(consoleDlg.find("#lastName").val());
137. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
138. varpEmail=$.trim(consoleDlg.find("#email").val());
139. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
140. varpAddress=$.trim(consoleDlg.find("#address").val());
141. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
142. varpNationality=$.trim(consoleDlg.find("#nationality").val());
144. varparams={
145. "contact.lastName":pLastName,
146. "contact.firstName":pFirstName,
147. "contact.email":pEmail,
148. "contact.telNo":pTelNo,
149. "contact.address":pAddress,
150. "contact.idCardNo":pIdCardNo,
151. "contact.nationality":pNationality
152. };
154. varactionUrl="createContact.action"
156. $.ajax({
157. url:actionUrl,
158. data:params,
159. dataType:"json",
160. cache:false,
161. error:function(textStatus,errorThrown){
162. alert("系统ajax交互错误:"+textStatus);
163. },
164. success:function(data,textStatus){
165. if(data.ajaxResult=="success"){
166. vardataRow={
167. id:data.contact.id,//从Server端得到系统分配的id
168. lastName:pLastName,
169. firstName:pFirstName,
170. email:pEmail,
171. telNo:pTelNo
172. };
174. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");
176. if(srcrowid){
177. $("#gridTable").jqGrid("addRowData",data.contact.id,dataRow,"before",srcrowid);
178. }else{
179. $("#gridTable").jqGrid("addRowData",data.contact.id,dataRow,"first");
180. }
181. consoleDlg.dialog("close");
183. alert("联系人添加操作成功!");
185. }else{
186. alert("添加操作失败!");
187. }
188. }
189. });
190. };
191. varupdateContact=function(){
192. varconsoleDlg=$("#consoleDlg");
194. varpId=$.trim(consoleDlg.find("#selectId").val());
195. varpLastName=$.trim(consoleDlg.find("#lastName").val());
196. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
197. varpEmail=$.trim(consoleDlg.find("#email").val());
198. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
199. varpAddress=$.trim(consoleDlg.find("#address").val());
200. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
201. varpNationality=$.trim(consoleDlg.find("#nationality").val());
202. varparams={
203. "contact.id":pId,
204. "contact.lastName":pLastName,
205. "contact.firstName":pFirstName,
206. "contact.email":pEmail,
207. "contact.telNo":pTelNo,
208. "contact.address":pAddress,
209. "contact.idCardNo":pIdCardNo,
210. "contact.nationality":pNationality
211. };
212. varactionUrl="updateContact.action";
213. $.ajax({
214. url:actionUrl,
215. data:params,
216. dataType:"json",
217. cache:false,
218. error:function(textStatus,errorThrown){
219. alert("系统ajax交互错误:"+textStatus);
220. },
221. success:function(data,textStatus){
222. if(data.ajaxResult=="success"){
223. vardataRow={
224. id:data.contact.id,
225. lastName:pLastName,
226. firstName:pFirstName,
227. email:pEmail,
228. telNo:pTelNo
229. };
230. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow,{color:"#FF0000"});
232. alert("联系人信息更新成功!");
234. consoleDlg.dialog("close");
236. }else{
237. alert("修改操作失败!");
238. }
239. }
240. });
241. };
242. vardeleteContact=function(){
243. varconsoleDlg=$("#consoleDlg");
245. varpId=$.trim(consoleDlg.find("#selectId").val());
246. varparams={
247. "contact.id":pId
248. };
249. varactionUrl="deleteContact.action";
250. $.ajax({
251. url:actionUrl,
252. data:params,
253. dataType:"json",
254. cache:false,
255. error:function(textStatus,errorThrown){
256. alert("系统ajax交互错误:"+textStatus);
257. },
258. success:function(data,textStatus){
259. if(data.ajaxResult=="success"){
260. $("#gridTable").jqGrid("delRowData",pId);
262. consoleDlg.dialog("close");
263. alert("联系人删除成功!");
264. }else{
265. alert("删除操作失败!");
266. }
267. }
268. });
269. };

$(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid03.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); var alertText = "<div style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;" mce_style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;">请选择需要操作的数据行!</div>"; $("#gridTable").jqGrid("navGrid", "#gridPager", { addfunc : openDialog4Adding, // (1) 点击添加按钮，则调用openDialog4Adding方法 editfunc : openDialog4Updating, // (2) 点击添加按钮，则调用openDialog4Updating方法 delfunc : openDialog4Deleting, // (3) 点击添加按钮，则调用openDialog4Deleting方法 alerttext : alertText // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息 },{},{},{},{ // (5) 修改于查询相关的prmSearch参数 caption: "查找", Find: "Let's go!", multipleSearch: true, groupOps: [{ op: "AND", text: "全部" }], },{}); // 配置对话框 $("#consoleDlg").dialog({ autoOpen: false, modal: true, // 设置对话框为模态（modal）对话框 resizable: true, width: 480, buttons: { // 为对话框添加按钮 "取消": function() {$("#consoleDlg").dialog("close")}, "创建": addContact, "保存": updateContact, "删除": deleteContact } }); }); var openDialog4Adding = function() { var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled").val(""); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('创建')").show(); consoleDlg.dialog("option", "title", "创建新联系人").dialog("open"); }; var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").removeAttr("disabled"); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('保存')").show(); consoleDlg.dialog("option", "title", "修改联系人信息"); loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法 } var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数 var consoleDlg = $("#consoleDlg"); var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); consoleDlg.find("input").attr("disabled", true); dialogButtonPanel.find("button:not(:contains('取消'))").hide(); dialogButtonPanel.find("button:contains('删除')").show(); consoleDlg.dialog("option", "title", "删除联系人"); loadSelectedRowData(rowid); } var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数 var params = { "contact.id" : selectedRowId }; var actionUrl = "viewContact.action"; // 从Server读取对应ID的JSON数据 $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { // 如果读取结果成功，则将信息载入到对话框中 var rowData = data.contact; var consoleDlg = $("#consoleDlg"); consoleDlg.find("#selectId").val(rowData.id); consoleDlg.find("#lastName").val(rowData.lastName); consoleDlg.find("#firstName").val(rowData.firstName); consoleDlg.find("#certificateNo").val(rowData.certificateNo); consoleDlg.find("#email").val(rowData.email); consoleDlg.find("#telNo").val(rowData.telNo); consoleDlg.find("#address").val(rowData.address); consoleDlg.find("#idCardNo").val(rowData.idCardNo); consoleDlg.find("#nationality").val(rowData.nationality); // 根据新载入的数据将表格中的对应数据行一并刷新一下 var dataRow = { id : rowData.id, lastName : rowData.lastName, firstName : rowData.firstName, email : rowData.email, telNo : rowData.telNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); // 打开对话框 consoleDlg.dialog("open"); } }); }; var addContact = function() { var consoleDlg = $("#consoleDlg"); var pLastName = $.trim(consoleDlg.find("#lastName").val()); var pFirstName = $.trim(consoleDlg.find("#firstName").val()); var pEmail = $.trim(consoleDlg.find("#email").val()); var pTelNo = $.trim(consoleDlg.find("#telNo").val()); var pAddress = $.trim(consoleDlg.find("#address").val()); var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); var pNationality = $.trim(consoleDlg.find("#nationality").val()); var params = { "contact.lastName" : pLastName, "contact.firstName" : pFirstName, "contact.email" : pEmail, "contact.telNo" : pTelNo, "contact.address" : pAddress, "contact.idCardNo" : pIdCardNo, "contact.nationality" : pNationality }; var actionUrl = "createContact.action" $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if(data.ajaxResult == "success") { var dataRow = { id : data.contact.id, // 从Server端得到系统分配的id lastName : pLastName, firstName : pFirstName, email : pEmail, telNo : pTelNo }; var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow"); if(srcrowid) { $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "before", srcrowid); } else { $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "first"); } consoleDlg.dialog("close"); alert("联系人添加操作成功!"); } else { alert("添加操作失败!"); } } }); }; var updateContact = function() { var consoleDlg = $("#consoleDlg"); var pId = $.trim(consoleDlg.find("#selectId").val()); var pLastName = $.trim(consoleDlg.find("#lastName").val()); var pFirstName = $.trim(consoleDlg.find("#firstName").val()); var pEmail = $.trim(consoleDlg.find("#email").val()); var pTelNo = $.trim(consoleDlg.find("#telNo").val()); var pAddress = $.trim(consoleDlg.find("#address").val()); var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); var pNationality = $.trim(consoleDlg.find("#nationality").val()); var params = { "contact.id" : pId, "contact.lastName" : pLastName, "contact.firstName" : pFirstName, "contact.email" : pEmail, "contact.telNo" : pTelNo, "contact.address" : pAddress, "contact.idCardNo" : pIdCardNo, "contact.nationality" : pNationality }; var actionUrl = "updateContact.action"; $.ajax( { url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if (data.ajaxResult == "success") { var dataRow = { id : data.contact.id, lastName : pLastName, firstName : pFirstName, email : pEmail, telNo : pTelNo }; $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow, {color:"#FF0000"}); alert("联系人信息更新成功!"); consoleDlg.dialog("close"); } else { alert("修改操作失败!"); } } }); }; var deleteContact = function() { var consoleDlg = $("#consoleDlg"); var pId = $.trim(consoleDlg.find("#selectId").val()); var params = { "contact.id" : pId }; var actionUrl = "deleteContact.action"; $.ajax({ url : actionUrl, data : params, dataType : "json", cache : false, error : function(textStatus, errorThrown) { alert("系统ajax交互错误: " + textStatus); }, success : function(data, textStatus) { if (data.ajaxResult == "success") { $("#gridTable").jqGrid("delRowData", pId); consoleDlg.dialog("close"); alert("联系人删除成功!"); } else { alert("删除操作失败!"); } } }); };