kristain

博客园 首页 新随笔 联系 订阅 管理
jqGrid Pager、Navigator和自定义按钮（转）

转自：http://blog.csdn.net/gengv/article/details/5720707

 

在介绍排序与查询之前，先介绍一下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 plaincopy
  1. $(function(){  
  2.     ...  
  3.       
  4.     $("#gridTable").jqGrid("navGrid", "#gridPager", {  
  5.         addfunc : openDialog4Adding,    // (1) 点击添加按钮，则调用openDialog4Adding方法  
  6.         editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法  
  7.         delfunc : openDialog4Deleting,  // (3) 点击删除按钮，则调用openDialog4Deleting方法  
  8.         alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息  
  9.     });  
  10.       
  11.     ...  
  12. });  
  13. var openDialog4Adding = function() {  
  14.     var consoleDlg = $("#consoleDlg");  
  15.     var dialogButtonPanel = 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. var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数  
  22.     var consoleDlg = $("#consoleDlg");  
  23.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
  24.       
  25.     consoleDlg.find("input").removeAttr("disabled");  
  26.     dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
  27.     dialogButtonPanel.find("button:contains('保存')").show();  
  28.     consoleDlg.dialog("option", "title", "修改联系人信息");  
  29.       
  30.     loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法  
  31. };  
  32. var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数  
  33.     var consoleDlg = $("#consoleDlg");  
  34.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
  35.       
  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", "删除联系人");  
  40.       
  41.     loadSelectedRowData(rowid);  
  42. };  
  43. var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数  
  44.           
  45.     var params = {  
  46.         "contact.id" : selectedRowId  
  47.     };  
  48.     var actionUrl = "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.             var rowData = data.contact;  
  61.             var consoleDlg = $("#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);  
  71.               
  72.             // 根据新载入的数据将表格中的对应数据行一并刷新一下  
  73.             var dataRow = {  
  74.                     id : rowData.id,  
  75.                     lastName : rowData.lastName,  
  76.                     firstName : rowData.firstName,  
  77.                     email : rowData.email,  
  78.                     telNo : rowData.telNo  
  79.                 };  
  80.               
  81.             $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow);  
  82.                   
  83.             // 打开对话框  
  84.             consoleDlg.dialog("open");  
  85.         }  
  86.     });  
  87. };  

 

 

 

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

 

 

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

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

例如：

 

[javascript] view plaincopy
  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's go!",  
  14.         multipleSearch : true  
  15.     },  
  16.     {}  // prmView  
  17. );  

 

 

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

 

[javascript] view plaincopy
  1. $.jgrid = {  
  2. ...  
  3.    search : {  
  4.      caption: "Search...",  
  5.      Find: "Find",  
  6.      Reset: "Reset",  
  7.      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'],  
  8.      groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],  
  9.      matchText: " match",  
  10.      rulesText: " rules"  
  11.    },  
  12.    edit : {  
  13.      addCaption: "Add Record",  
  14.      editCaption: "Edit Record",  
  15.      bSubmit: "Submit",  
  16.      bCancel: "Cancel",  
  17.      bClose: "Close",  
  18.      saveData: "Data has been changed! Save changes?",  
  19.      bYes : "Yes",  
  20.      bNo : "No",  
  21.      bExit : "Cancel",  
  22.   },  
  23.   view : {  
  24.     caption: "View Record",  
  25.     bClose: "Close"  
  26.   },  
  27.   del : {  
  28.     caption: "Delete",  
  29.     msg: "Delete selected record(s)?",  
  30.     bSubmit: "Delete",  
  31.     bCancel: "Cancel"  
  32.   },  
  33.   nav : {  
  34.     edittext: "",  
  35.     edittitle: "Edit selected row",  
  36.     addtext:"",  
  37.     addtitle: "Add new row",  
  38.     deltext: "",  
  39.     deltitle: "Delete selected row",  
  40.     searchtext: "",  
  41.     searchtitle: "Find records",  
  42.     refreshtext: "",  
  43.     refreshtitle: "Reload Grid",  
  44.     alertcap: "Warning",  
  45.     alerttext: "Please, select row",  
  46.     viewtext: "",  
  47.     viewtitle: "View selected row"  
  48.   },  
  49. ...  

 

 

 

 

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 plaincopy
  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.     });  
  30.       
  31.     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>";  
  32.       
  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's go!",  
  41.         multipleSearch: true,  
  42.         groupOps: [{ op: "AND", text: "全部" }],  
  43.     },{});  
  44.       
  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. var openDialog4Adding = function() {  
  60.     var consoleDlg = $("#consoleDlg");  
  61.     var dialogButtonPanel = 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. var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数  
  68.     var consoleDlg = $("#consoleDlg");  
  69.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
  70.       
  71.     consoleDlg.find("input").removeAttr("disabled");  
  72.     dialogButtonPanel.find("button:not(:contains('取消'))").hide();  
  73.     dialogButtonPanel.find("button:contains('保存')").show();  
  74.     consoleDlg.dialog("option", "title", "修改联系人信息");  
  75.       
  76.     loadSelectedRowData(rowid); // (7) 将选中行id传入loadSelectedRowData方法  
  77. }  
  78. var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数  
  79.     var consoleDlg = $("#consoleDlg");  
  80.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  
  81.       
  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", "删除联系人");  
  86.       
  87.     loadSelectedRowData(rowid);  
  88. }  
  89. var loadSelectedRowData = function(selectedRowId) { // (9) 接受选中行的id为参数  
  90.     var params = {  
  91.         "contact.id" : selectedRowId  
  92.     };  
  93.     var actionUrl = "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.             var rowData = data.contact;  
  106.             var consoleDlg = $("#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);  
  116.               
  117.             // 根据新载入的数据将表格中的对应数据行一并刷新一下  
  118.             var dataRow = {  
  119.                     id : rowData.id,  
  120.                     lastName : rowData.lastName,  
  121.                     firstName : rowData.firstName,  
  122.                     email : rowData.email,  
  123.                     telNo : rowData.telNo  
  124.                 };  
  125.               
  126.             $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow);  
  127.                   
  128.             // 打开对话框  
  129.             consoleDlg.dialog("open");  
  130.         }  
  131.     });  
  132. };  
  133. var addContact = function() {  
  134.     var consoleDlg = $("#consoleDlg");  
  135.           
  136.     var pLastName = $.trim(consoleDlg.find("#lastName").val());  
  137.     var pFirstName = $.trim(consoleDlg.find("#firstName").val());  
  138.     var pEmail = $.trim(consoleDlg.find("#email").val());  
  139.     var pTelNo = $.trim(consoleDlg.find("#telNo").val());  
  140.     var pAddress = $.trim(consoleDlg.find("#address").val());  
  141.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val());  
  142.     var pNationality = $.trim(consoleDlg.find("#nationality").val());  
  143.       
  144.     var params = {  
  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.     };  
  153.       
  154.     var actionUrl = "createContact.action"  
  155.       
  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.                 var dataRow = {  
  167.                     id : data.contact.id,   // 从Server端得到系统分配的id  
  168.                     lastName : pLastName,  
  169.                     firstName : pFirstName,  
  170.                     email : pEmail,  
  171.                     telNo : pTelNo  
  172.                 };  
  173.                   
  174.                 var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");  
  175.                   
  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");  
  182.                   
  183.                 alert("联系人添加操作成功!");  
  184.                   
  185.             } else {  
  186.                 alert("添加操作失败!");  
  187.             }  
  188.         }  
  189.     });  
  190. };  
  191. var updateContact = function() {  
  192.     var consoleDlg = $("#consoleDlg");  
  193.       
  194.     var pId = $.trim(consoleDlg.find("#selectId").val());  
  195.     var pLastName = $.trim(consoleDlg.find("#lastName").val());  
  196.     var pFirstName = $.trim(consoleDlg.find("#firstName").val());  
  197.     var pEmail = $.trim(consoleDlg.find("#email").val());  
  198.     var pTelNo = $.trim(consoleDlg.find("#telNo").val());  
  199.     var pAddress = $.trim(consoleDlg.find("#address").val());  
  200.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val());  
  201.     var pNationality = $.trim(consoleDlg.find("#nationality").val());  
  202.     var params = {  
  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.     var actionUrl = "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.                 var dataRow = {  
  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"});  
  231.                   
  232.                 alert("联系人信息更新成功!");  
  233.                   
  234.                 consoleDlg.dialog("close");  
  235.                   
  236.             } else {  
  237.                 alert("修改操作失败!");  
  238.             }  
  239.         }  
  240.     });  
  241. };  
  242. var deleteContact = function() {  
  243.     var consoleDlg = $("#consoleDlg");  
  244.       
  245.     var pId = $.trim(consoleDlg.find("#selectId").val());  
  246.     var params = {  
  247.         "contact.id" : pId  
  248.     };  
  249.     var actionUrl = "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);  
  261.                   
  262.                 consoleDlg.dialog("close");  
  263.                 alert("联系人删除成功!");  
  264.             } else {  
  265.                 alert("删除操作失败!");  
  266.             }  
  267.         }  
  268.     });  
  269. };  

 

 

posted on 2012-05-10 19:49  kristain  阅读(27932)  评论(3)  编辑  收藏  举报