一個將數據顯示在grid中主要的原因是為了快速容易的編輯它，jqGrid支持3種編輯方法
- jqGrid單元格編輯配置，事件及方法:：編輯表格中的單元格
- jqGrid行編輯配置：同時編輯一行中的多個單元格
- jqGrid表單編輯配置：在grid外部的表單中編輯數據行
安裝
在下載管理中每個模塊有它自己的要求，但是不管哪個模塊，都要勾選通用模塊（common module）。下載地址：http://www.trirand.com/blog/?page_id=6 開發者可以從src目錄中找到grid.common.js源文件。
選項和描述
所有編輯模塊需要在colModel中配置通用編輯屬性以便啟用編輯，下面列出的屬性是需要詳細介紹的
- editable
- edittype
- editoptions
- editrules
- formoptions（僅在表單編輯模式有效）
通用配置語法如下
JavaScript代碼
對於特定的選項和事件請參閱對應的模塊。對每個模塊jqGrid為每個可編輯的元素配置不同的name和id，參考對應的編輯模塊看如何構造。
editable
布爾值，true或者false。定義此字段是否能編輯，默認為false不可編輯，要使字段可以編輯，設置為 editable:true。
需要注意的是隱藏字段（hidden fields）默認不能編輯；如果隱藏字段被標記為可編輯的，在行編輯和單元格編輯模塊需要顯示這些字段（使用showCol方法），才能進行編輯。在表單編輯模塊中需要使用editrules選項（下面將介紹到）
edittype
定義可編輯字段的輸入控件類型。可用值： 'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file' 和'custom'，默認值為'text'.
text
edittype設置為text，jqGrid將會構造一個type為text的input標簽
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如
JavaScript代碼
輸入控件HTML結構如下
JavaScript代碼
jqGrid會自動給此配置添加id和name屬性。
textarea
edittype設置為textarea，jqGrid將會構造一個textarea標簽
JavaScript代碼
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如（注意添加rows）
JavaScript代碼
對應的HTML結構
JavaScript代碼
jqGrid會自動給此配置添加id和name屬性。
checkbox
edittype設置為checkbox，jqGrid將會構造一個type為checkbox的input標簽
使用 editoptions ，主要用於定義勾選或者未勾選時的值，例如
JavaScript代碼
輸入控件HTML結構如下
當value為yes，checkbox被勾選，否則未勾選。值將會作為參數傳遞到jqGrid配置的editurl中。
editoptions中如果未設置value屬性，jqGrid將會查找如下的值（false|0|no|off|undefined）以便構造checkbox。如果單元格內容都不包含這些值，那么屬性值變為單元格的內容offval屬性值設置為off。
示例，單元格內容為true
jqGrid會自動給此配置添加id和name屬性。
select
edittype設置為select，jqGrid將會構造一個如下所示的select標簽
<option value='val1'> Value1 </option>
<option value='val2'> Value2 </option>
...
<option value='valn'> ValueN </option>
</select>
要配置select對象，有3個主要的類型
1. editoptions配置中的 value為字符 。editoptions 的value需要包含一組 “值:標簽”用分號（;）分隔開，如下所示
JavaScript代碼
上面的代碼將會得到如下html代碼
<option value='FE'> FedEx </option>
<option value='IN'> InTime </option>
<option value='TN'> TNT </option>
</select>
最后一組“值:標”不要以分號(;)結束
2. editoptions配置中的 value為對象
value配置需要包含json鍵值對對象，如下所示
JavaScript代碼
對應的HTML結構
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
3. 設置 editoptions配置 dataUrl 參數。 editoptions 中的dataUrl配置僅對editype:select有效。dataUrl表示從 配置的url中獲取select元素的html代碼。當配置了dataUrl，通過ajax獲取html代碼對元素進行填充，返回的html需要是一個有效的select元素html代碼，如下所示
<option value='1'>One</option>
<option value='2'>Two</option>
...
</select>
上面三種方法配置的select元素，jqGrid會自動給元素添加id和name屬性。
也可以設置select對象為多選的，需要設置size和multiple2個屬性，如下所示
JavaScript代碼
password
edittype設置為password，jqGrid將會構造一個type為password的input標簽
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如
JavaScript代碼
輸入控件HTML結構如下
jqGrid會自動給此配置添加id和name屬性。
button
edittype設置為text，jqGrid將會構造一個type為button的input標簽
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如
對應的HTML結構
jqGrid會自動給此配置添加id和name屬性。
image
edittype設置為image，jqGrid將會構造一個type為image的input標簽
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如
JavaScript代碼
輸入控件HTML結構如下
jqGrid會自動給此配置添加id和name屬性。
file
edittype設置為file，jqGrid將會構造一個type為filet的input標簽
使用 editoptions ，可以定義此字段對應輸入控件需要的屬性，例如
JavaScript代碼
輸入控件HTML結構如下
jqGrid會自動給此配置添加id和name屬性。如果創建了這個元素（一般使用表單編輯模式），表單不會為了上傳文件增加ENCTYPE=“multipart/form-data"，需要倒入另外的插件來完成上傳- Ajax File Upload 插件就是一個很不錯的選擇
custom
這個編輯類型允許自定義可編輯的元素。edittype設置為custom后，再editoptions中需要配置2個函數，一個創建元素，另外一個負責在表單中設置和獲取值，以便提交到服務器。這2個方法需要被定義為custom_element 和 custom_value. 看下面的editoptions獲取更多信息。
當自定義元素創建后jqGrid會自動執行下面附加的任務
- 添加 'customelement'樣式
- 添加name屬性，對應colModel中定義的name值
- 按照使用的編輯類型對應的id生成規則，給元素添加id
如上面示例所示的創建edittype為text，設置edittype為custom對應的代碼
JavaScript代碼
var el = document.createElement("input");
el.type="text";
el.value = value;
return el;
}
function myvalue(elem, operation, value) {
if(operation === 'get') {
return $(elem).val();
} else if(operation === 'set') {
$('input',elem).val(value);
}
}
jQuery("#grid_id").jqGrid({
//...
colModel: [
//...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
//...
]
//...
});
editoptions
editoptions配置為JSON鍵值對對象包含編輯列的相關信息。edittype設置為什么，對應的editoptions可以設置為什么，這個需要知道，下面列出的每個配置對edittype設置的元素不一定都有效。colModel中的editoptions使用配置語法如下，為JSON鍵值對
<scrJavaScript代碼
//...
colModel: [
//...
{name:'price', ..., editoptions:{name1:value1...}, editable:true },
//...
]
//...
});
下面為一些比較常用的選項
| 配置名稱 | 類型 | 描述 |
|---|---|---|
| value | mixed |
|
| dataUrl | string | 僅對editype:select有效。dataUrl表示從 配置的url中獲取select元素的html代碼。當配置了dataUrl，通過ajax獲取html代碼對元素進行填充，返回的html需要是一個有效的select元素html代碼，例如
<select>
<option value='1'>One</option> <option value='2'>Two</option> ... </select> |
| buildSelect | function | 僅當dataUrl設置有效，配置這個可以使用自定義函數來創建select。函數需要返回字有效的select html字符串，如dataUrl描述的一樣。函數參數為服務器響應內容 |
| dataInit | function | 定義了函數，函數參數為創建的元素對象。元素創建后調用一次。例如
－收縮
JavaScript代碼
…editoptions: { dataInit :
function (elem) {
$(elem).autocomplete(); } } 行編輯或者單元格編輯模式每次都會被調用當編輯新行或者單元格時，表單編輯模式下，recreateForm設置為false，僅調用一次，recreateForm設置為true則每次都會調用。. |
| dataEvents | array | 需要綁定到元素的事件列表，示例如下
－收縮
JavaScript代碼
… editoptions: { dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } }, { type: 'keypress', fn: function(e) { console.log('keypress'); } } ] } |
| defaultValue | mixed | 值可以配置為string或者函數。此配置僅當在表單編輯模式，調用editGridRow方法添加數據時有效。輸入元素的值被設置為配置值。如果是select元素，則提供的是顯示的文本而非鍵（ If used in selects the text should be provided and not the key）。配置為function時需要返回內容值。 |
| NullIfEmpty | boolean | 配置為true，但字段內容為空時將會發送字符串 'null' 到服務器。 |
| custom_element | function | 僅對edittype 設置為'custom'有效。此方法用於創建元素，返回創建后的DOM元素對象。函數參數為editoptions配置的value，colModel配置的editoptions對象（Parameters passed to this function are the value and the editoptions from colModel）。【PS：感覺value有點多余，因為value原本就包含在editoptions里面，單獨分離出來為了方便訪問？還是我理解錯了？） |
| custom_value | function | 僅對edittype 設置為'custom'有效。函數需要返回元素被編輯后的值，以便提交到服務器。或者設置輸入元素的值。 函數第一個參數為元素對象，第二個參數為字符串類型的參數，對於行編輯和單元格編輯，內容為“get“。下面列出其他類型的值。 如果為表單編輯模式，這個函數有不同的行為。此函數有第三個參數，元素的值。 當要提交自定義元素的值時，第二個參數為”get”，因此函數需要返回元素的值。如果沒有返回值將會拋出異常錯誤。 當從grid中讀取數據設置表單，第二個參數為“set"，第三個參數為讀取的內容，用於設置元素的值。這樣在表單顯示內容前，修改從grid讀取的值，參考上面的示例 |
| other options | mixed | 可以設置編輯元素的所有可用DOM屬性，例如，edittype為text，可以設置size，maxlength等屬性 |
editrules
這個選擇添加附加的屬性到可編輯元素，在colModel中 配置。通常用於在提交內容到服務器前驗證用戶輸入的信息。demo
JavaScript代碼
...
colModel: [
...
{name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
...
]
...
});
下面為可用的選項
| 配置名稱 | 類型 | 描述 |
|---|---|---|
| edithidden | boolean | 僅在表單編輯模塊有效。默認隱藏字段無法編輯。設置為true時，隱藏字段在添加和修改方法被調用時呈現出來，可以編輯 |
| required | boolean | (true or false) 設置為true，不允許內容為空，為空將會顯示一個錯誤信息。 |
| number | boolean | (true or false) 設置為true，輸入內容只能為數字，否則將會顯示一個錯誤信息。 |
| integer | boolean | (true or false)設 置為true，輸入內容只能為整數，否則將會顯示一個錯誤信息。 |
| minValue | number(integer) | 最小值，如果內容小於這個配置值，將會顯示錯誤信息。 |
| maxValue | number(integer) | 最大值，如果內容大於這個配置值，將會顯示錯誤信息。 |
| boolean | 設置為true，輸入內容格式需要滿足email格式要求，否則將會顯示一個錯誤信息。 | |
| url | boolean | 設置為true，輸入內容格式需要滿足url格式要求，否則將會顯示一個錯誤信息。 |
| date | boolean | 設置為true，輸入內容格式需要滿足日期格式要求（使用ISO格式，”Y-m-d“），否則將會顯示一個錯誤信息。 |
| time | boolean | 設置為true，輸入內容格式需要滿足時間格式要求，否則將會顯示一個錯誤信息。 目前僅支持”hh:mm“和后接可選的 am/pm 時間格式 |
| custom | boolean | 設置為true，允許使用自定義的驗證方法，如下 |
| custom_func | function | custom設置為true時需要配置此函數。函數參數，輸入控件的值，name名稱（來自colModel）。 函數需要返回一個數組包含以下項目 第一項：true/false，指定驗證是否成功 第二項：當第一項為false有效，顯示給用戶的錯誤信息。 格式如：[false,”Please enter valid value”] |
自定義驗證示例
JavaScript代碼
if (value < 0 || value >20)
return [false,"Please enter value between 0 and 20"];
else
return [true,""];
}
jQuery("#grid_id").jqGrid({
//...
colModel: [
//...
{name:'price', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true },
//...
]
//...
});
formoptions
僅在表單編輯有效。目的是記錄表中的元素並且附加一些信息在編輯元素的前面或者后面。語法如下
JavaScript代碼
//...
colModel: [
//...
{name:'price', ..., formoptions:{elmprefix:'(*)', rowpos:1, colpos:2....}, editable:true },
//...
]
//...
});
如果colModel中要使用rowpos和colpos配置，那么建議所有可編輯的字段使用這些配置
下面為可用的選項
| 配置名稱 | 類型 | 描述 |
|---|---|---|
| elmprefix | string | 在輸入元素前顯示的內容（內容可以為html格式的字符串） |
| elmsuffix | string | 在輸入元素后顯示的內容（內容可以為html格式的字符串） |
| label | string | 替換jqGrid配置colNames數組中定義的標簽作為表單輸入項的標簽說明內容 |
| rowpos | number | 定義元素所在行處於表單中位置，從1開始 |
| colpos | number | 定義元素所在列處於表單中位置，從1開始 |
2個元素可以有相同的行位置，但是不同的列位置，這樣這2個元素在表單中共處一行。