jqGrid行編輯配置，方法，事件

　行編輯可以在行修改后更新數據，如下圖所示

　　用戶用鼠標點擊選擇一行，jqGrid將可編輯的字段轉換為數據輸入單元，如上面圖所示。不可編輯的列，如id，不會轉為可輸入單元，而是保持不變。可以通過配置colModel來實現。完成修改后，按下“enter”鍵提交數據到服務器。

軟件要求和安裝

　　要使用行編輯功能，需要在jqGrid下載頁面勾選Inline Editing和Common modules，然后下載。下載地址：http://www.trirand.com/blog/?page_id=6

　　要看元代可以從src目錄中找到 grid.inlinedit.js這個文件

　　屬於行編輯的屬性，事件和方法是jqGrid選項配置中的一個子集。

方法

有５個屬於行編輯的附加方法

• editRow
• saveRow
• restoreRow
• addRow
• inlineNav

　　需要在一個已經創建的jqGrid實例上調用這些方法，可以在事件中或者點擊按鈕觸發這些事件。

Exmaple

－收縮 JavaScript代碼

var lastSel
jQuery("#grid_id").jqGrid({
//...
   onSelectRow: function(id){
     if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
     }
     jQuery('#grid_id').editRow(id, true); 
   },
//...
});

　　上面的示例中，在將被選中的行轉為編輯模式前，判斷是否已經存在編輯的行，存在則取消此行編輯模式還原為原始狀態。如果你想保持數據而不是還原為原始狀態，可以使用saveRow替代restoreRow方法。

editRow：編輯行

調用方式

jQuery( "#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本jqGrid API調用方式

jQuery( "#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

editRow參數配置說明

• grid_id ：已經構造過的jqGrid
• rowid：此數據行的id
• keys：設置為true可以使用 [Enter]保存數據或者[Esc] 取消編輯
• oneditfunc：在行成功轉為編輯模式下觸發的事件，參數為此行數據id
• successfunc, url, extraparam, aftersavefunc,errorfunc 和 afterrestorefunc在下面的saveRow方法中介紹。

　　擁有'not-editable-row' 樣式的行不可編輯，即使colModel中配置了某些列能編輯。

　　設置editRow方法的oneditfunc為某個函數的句柄，例如func為一個函數，不能設置為字符串"func"或者func()這種格式，傳遞func即可。

　　jqGrid4+，可以傳遞對象作為配置值，如下示

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('editRow',rowid, 
{ 
    keys : true, 
    oneditfunc: function() {
        alert ("edited"); 
    }
});

editRow默認配置如下

editparameters = {
     "keys" : false,
    "oneditfunc" : null,
    "successfunc" : null,
    "url" : null,
        "extraparam" : {},
    "aftersavefunc" : null,
    "errorfunc": null,
    "afterrestorefunc" : null,
    "restoreAfterError" : true,
    "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('editRow',rowid,  parameters);

　　如果key配置為true，那么 successfunc, url, extraparam, aftersavefunc, errorfunc 和 afterrestorefunc這些配置將作為參數傳遞給saveRow方法當按下 [Enter] 鍵時（saveRow） (saveRow不需要定義，jqGrid會自動調用它)。

　　當調用此方法編輯指定的某行時，jqGrid讀取可編輯字段的內容，依據edittype和editoptions自動生成對應的輸入控件。

saveRow：保存行

保存被編輯的行，調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

新版本調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

　　jqGrid4+版本可以傳遞對象作為配置值，如下

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('saveRow',rowid, 
{ 
    successfunc: function( response ) {
        return true; 
    }
});

saveRow默認參數配置如下

－收縮 JavaScript代碼

saveparameters = {
     "successfunc" : null,
    "url" : null,
        "extraparam" : {},
    "aftersavefunc" : null,
    "errorfunc": null,
    "afterrestorefunc" : null,
    "restoreAfterError" : true,
    "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('saveRow',rowid,  saveparameters);

saveRow參數配置說明

• rowid：要保存的數據行id
• successfunc：配置過，那么將在成功請求后觸發（200狀態，動態頁沒有發生錯誤）。事件參數為XHR對象，需要返回true/false（返回true會使用修改后的數據填充當前行，否則使用修改前的數據填充，同時關閉編輯模式。可以通過XHR.responseText得到服務器的返回值判斷是否修改成功，在返回true/false，不會ajax可以參考這個： ajax對象）
• url：定義此項，將會替代jqGrid配置中的editurl，如果設置為 'clientArray'，僅保存數據到grid中，不會向服務器提交數據（如果不想更改一行就提交一次，配置為這個值比較有用，可以點擊頁面上某個按鈕將所有數據用ajax一次提交）
• extraparam：提交到服務器的其他附加數據
• aftersavefunc：數據保存到服務器返回客戶端后觸發。此事件參數為rowid和xhr對象，url設置為clientArray也會觸發此事件
• errorfunc：動態頁出錯時觸發，。此事件參數為rowid和xhr對象
• afterrestorefunc：調用restoreRow還原數據行原始信息（數據行保存不成功）時觸發，參數有rowid

 

傳遞給saveRow配置值為函數的，需要傳遞函數句柄，如函數func，不能設置為"func"或者func()，配置為func即可

　　url（或者jqGrid配置中的editurl）未配置為 'clientArray'，調用此方法，數據行數據將將會以鍵值對形式提交到服務器，鍵名稱來源於colModel配置的name，同時jqGrid會附加上id:rowid。如

－收縮 JavaScript代碼

jQuery( "#grid_id").saveRow("rowid", false);

將保存數據到grid中並同時發送到服務器保存，而

－收縮 JavaScript代碼

jQuery( "#grid_id").saveRow("rowid", false, 'clientArray');

僅保存數據到grid中，而不會發送ajax請求服務器。新版本API調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('saveRow',"rowid", false);
jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');

以對象作為參數的調用形式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('saveRow',"rowid", { url : 'clientArray' });

有2個附加的配置可以在jqGrid中設置。

配置名稱	類型	描述	默認值
ajaxRowOptions	object	設置提交數據到服務器的ajax請求全局設置。可以重寫當前所有保存數據ajax請求配置，包括complete事件	empty object
serializeRowData	postdata	配置此事件可以序列化傳遞給保存數據行的ajax的數據。配置的函數需要返回序列化后的數據。當需要發送自定義數據時可以使用這個配置，例如，json、xml格式的字符串等，傳遞給配置函數的參數為發往服務器的數據。	null

restoreRow：還原數據行

此方法將正在編輯的行還原為上一次成功保存的值。

調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").restoreRow(rowid, afterrestorefunc);

新API調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('restoreRow',rowid, afterrestorefunc);

jqGrid4+可以將參數作為對象傳遞，如下

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('restoreRow',rowid, 
{ 
    "afterrestorefunc" : function( response ) {
        // code here 
    }
});

默認配置如下

－收縮 JavaScript代碼

restoreparameters = {
     "afterrestorefunc" : null
}
 
jQuery("#grid_id").jqGrid('restoreRow',rowid,  restoreparameters);

restoreRow參數說明

• rowid ：要還原的數據行id
• afterrestorefunc ：數據行被還原后觸發，參數有 rowid

addRow：添加新數據行

行編輯模式下新增一行數據，調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").addRow(rowid, parameters);

新API調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('addRow',parameters);

parameters默認值如下

－收縮 JavaScript代碼

parameters =
{
    rowID :  "new_row",
    initdata : {},
    position :"first",
    useDefValues : false,
    useFormatter : false,
    addRowParams : {extraparam:{}}
}

addRow方法配置說明

• rowID - (string)新增加的新數據行id
• initdata - (object) json鍵值對對象，鍵名稱和colModel配置的name一致。設置單元格初始化值
• position - (string)新增加行的位置，默認first。設置為last將會插入到grid最后
• useDefValues - (boolean)設置為true啟用colModel中editoptions配置
• useFormatter : (boolean)設置為true啟用jqGrid中 formatter格式化數據
• addRowParams : (object) 傳遞給addRow方法的參數，和editRow配置一樣（實際是傳遞給editRow方法用的）

　　調用這個方法，實際調用了２個已經存在的方法來實現，首先調用addRowData添加一行本地數據，然后調用editRow方法編輯此行。addRowParams設置了key為true，按下ESC鍵會刪除此行數據

inlineNav：給行編輯添加導航操作按鈕

添加導航操作按鈕對應行編輯的addRow, editRow, saveRow, restoreRow方法。要使用此方法，需要首選調用navGrid方法。

調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").navGrid(pagerid, {...});
jQuery("#grid_id").inlineNav(pagerid, parameters);

新API調用方式

－收縮 JavaScript代碼

jQuery( "#grid_id").jqGrid('navGrid',pagerid, {...});
jQuery("#grid_id").jqGrid('inlineNav',pagerid, parameters);

parameters默認值如下

－收縮 JavaScript代碼

parameters = { 
   edit:  true,
   editicon: "ui-icon-pencil",
   add: true,
   addicon:"ui-icon-plus",
   save: true,
   saveicon:"ui-icon-disk",
   cancel: true,
   cancelicon:"ui-icon-cancel",
   addParams : {useFormatter : false},
   editParams : {}
}

配置名稱	類型	描述	默認值
add	boolean	是否在導航欄中顯示添加操作。點擊這個按鈕將會調用addRow(addParams)方法	true
addicon	string	設置添加按鈕的圖標。目前僅能設置為UI主題中的圖標	ui-icon-plus
addtext	string	在添加按鈕中顯示的文本內容	空值
addtitle	string	鼠標移動到添加按鈕上時顯示的提示信息	Add new row
edit	boolean	是否在導航欄中顯示編輯操作。點擊這個按鈕將會調用editRow(editParams)方法（注意需要選中一行，選中多行編輯最后一次選中的）	true
editicon	string	設置編輯按鈕的圖標。目前僅能設置為UI主題中的圖標	ui-icon-pencil
edittext	string	在編輯按鈕中顯示的文本內容	empty
edittitle	string	鼠標移動到編輯按鈕上時顯示的提示信息	Edit selected row
position	string	定義操作按鈕在導航欄中的位置，可以為left，center，right	left
save	boolean	是否在導航欄中顯示保存操作。點擊這個按鈕將會調用saveRow(editParams)方法	true
saveicon	string	設置保存按鈕的圖標。目前僅能設置為UI主題中的圖標	ui-icon-disk
savetext	string	在保存按鈕中顯示的文本內容	empty
savetitle	string	鼠標移動到保存按鈕上時顯示的提示信息	Save row
cancel	boolean	是否在導航欄中顯示取消操作。點擊這個按鈕將會調用restoreRow(editParams)方法	true
cancelicon	string	設置取消按鈕的圖標。目前僅能設置為UI主題中的圖標	ui-icon-cancel
canceltext	string	在取消按鈕中顯示的文本內容	empty
canceltitle	string	鼠標移動到取消按鈕上時顯示的提示信息	Cancel trow editiong
addParams	object	點擊添加按鈕后傳遞給addRow方法的參數，詳細信息參考上面的addRow參數	{useFormatter : false}
editParams	object	點擊導航欄按鈕的編輯，保存，取消按鈕，傳遞給 editRow, saveRow, restoreRow 方法的參數。請參考相關方法獲取更多信息	{}

注意事項

 

數據如何組織

編輯某行及輸入控件組成規則如下

• 被編輯的行新增editable=“1”自定義屬性
• jqGrid配置savedRow（json對象array數組）被當前行的數據填充，鍵值對對象，附加 id:rowid 鍵值對
• 隱藏的字段不包含在內（Hidden fields are not included）
• 可編輯元素的id組成為 'rowid_'+ name，name為colModel定義的name值。例如，我們編輯id為10的行，此列colModel配置的name值為myname，那么這個輸入控件的id為 10_myname
• 可編輯元素的name屬性值為colModel中配置的此列的name配置值
• 當行保存或者還原后，此行editable被設置為 “0” ，jqGridsavedRow中id為rowid的項被刪除

提交到服務器的內容

提交到服務器的數據包含如下提到的內容

• 鍵值對，鍵名稱對應此行的輸入控件name值（包含此行所有輸入控件）
• 附加id:rowid 鍵值對，rowid為此行數據id
• 如果extraparam參數，將會和提交的數據一起發送到服務qui

示例

－收縮 HTML代碼　　 運行代碼　　[如果運行無效果，請自行將源代碼保存為html文件運行]

<html>
<head>
<script type="text/javascript">
jQuery(document).ready(function(){ 
  var lastsel2
  jQuery("#rowed5").jqGrid({        
    datatype: "local",
    height: 250,
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
    colModel:[
      {name:'id',index:'id', width:90, sorttype:"int", editable: true},
      {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
      {name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
      {name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select', editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},                       
      {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}                      
              ],
    onSelectRow: function(id){
      if(id && id!==lastsel2){
        jQuery('#rowed5').restoreRow(lastsel2);
        jQuery('#rowed5').editRow(id,true);
          lastsel2=id;
      }
    },
    editurl: "server.php",
    caption: "Input Types"
  });
  var mydata2 = [
    {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
    {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
    {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
    {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
    {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
    {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
    {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
    {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
    {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
    ];
  for(var i=0;i<mydata2.length;i++)
    jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>

效果圖如下