我這裏用的不是jqGrid的自帶的編輯和刪除操作，我已經把分頁導航欄下的編輯，刪除，搜索都取消掉了,就是這句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然後在數據加載完成後，給每行添加了 修改和刪除鏈接
jqGrid完成的事件是gridComplete:function(){}（可以理解爲數據都準備好了）, 因爲從數據庫獲取到的json數據沒有帶修改和刪除兩項,所以在之後的處理就是，在gridComplete事件中循環爲每一行添加這兩個鏈接，並且都給他們加上了onclick事件。先看截圖：
修改的操作使用了jquery ui 的 dialog彈窗, 運行效果如下:(圖上彈出的alert框是我點擊確定按鈕後彈出的，也就是說要修改數據，在這個確定按鈕事件中進行）
頁面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jqGrid的JSON數據顯示</title> <style type="text/css"> body{font-size:12px;} </style> <link href="../css/redmond/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> <link href="../css/ui.jqgrid.css" rel="Stylesheet" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript" src="../js/grid.locale-cn.js"></script> <script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script> <script type="text/javascript"> function Modify(id) { //單擊修改鏈接的操作 var model = jQuery("#list1").jqGrid('getRowData', id); //alert(model.Id); $("#txtCityCode").val(model.Code); $("#txtCityName").val(model.Name); $("#txtFID").val(model.Fid); $("#modifyform").dialog({ height:230, width:400, resizable:false, modal:true, //這裏就是控制彈出爲模態 buttons:{ "確定":function(){ alert("在這裏對數據進行修改！"); $(this).dialog("close"); }, "取消":function(){$(this).dialog("close");} } }); } function Delete(id) { //單擊刪除鏈接的操作 alert("在這裏執行異步刪除操作，此時點擊了id爲 "+id+" 的行！"); } $(document).ready(function(){ $("#list1").jqGrid({ url:'JsonDataHandler2.aspx', datatype:"json", mtype:'GET', height:200, colNames:['編號','城市編號','城市名稱','所屬省份編號','修改','刪除'], //注意在colNames和colModel中都不要忘記加修改和刪除這兩列 colModel:[ {name:'Id',index:'Id',width:55}, {name:'Code',index:'Code',width:100}, {name:'Name',index:'Name',width:180, sortable:false}, {name:'Fid',index:'Fid',width:180}, {name:'Modify',index:'Id',width:80,align:"center",sortable:false}, {name:'Delete',index:'Id',width:80,align:'center',sortable:false} ], //autowidth:true, jsonReader:{ page:"page", total:"total", repeatitems:false, id:"Id" }, pager:jQuery('#pager1'), rowNum:20, rowList:[10,20,30], sortname:'Id', sortorder:'asc', viewrecords:true, caption:'jqGrid使用JSON數據測試', gridComplete:function(){ //在此事件中循環爲每一行添加修改和刪除鏈接 var ids=jQuery("#list1").jqGrid('getDataIDs'); for(var i=0; i<ids.length; i++){ var id=ids[i]; modify = "<a href='#' style='color:#f60' οnclick='Modify(" + id + ")'>修改</a>"; //這裏的onclick就是調用了上面的javascript函數 Modify(id) del = "<a href='#' style='color:#f60' οnclick='Delete(" + id + ")' >刪除</a>"; jQuery("#list1").jqGrid('setRowData', ids[i], { Modify: modify, Delete: del }); } } }).navGrid("#pager1",{edit:false,add:false,del:false,search:false}); }); </script> </head> <body> <table id="list1"></table> <div id="pager1"></div> <div id="modifyform" title="修改城市資料" style="display:none;"> <!-- 該Div的作用就是當點擊jqGrid表格中的修改鏈接時彈出的dialog, 注意是在上面的Modify(id)函數中給下面的input賦值 --> <p>城市編號：<input type="text" id="txtCityCode" /></p> <p>城市名稱：<input type="text" id="txtCityName" /></p> <p>所屬省份編號：<input type="text" id="txtFID" /></p> </div> </body> </html>