使用jqGrid修改數據
jqGrid可以有三種方式，讓我們來修改顯示在jqGrid中的數據。這三種方式分別是：
Cell Editing——只允許修改某一個單元格內容.（所有圖片均來自jqGrid的wiki或者jqGrid的Demo截圖）
Inline Editing——允許在jqGrid中直接修改某一行的數據
Form Editing——彈出一個新的編輯窗口進行編輯和新增
暫時先不管這三種方式，我們來看看如何讓一個jqGrid的數據能夠進行編輯呢？
其實很簡單，就是在jqGrid的colModel屬性中，設置幾個屬性：
editable
可選值是true或者false，默認是false。用來說明這個列的數據是否可編輯。特別要注意的是，jqGrid的隱藏字段就算設置了這個屬性爲true，一樣不能被編輯。在Cell Editing以及Inline Editing模式下，只能通過把這些字段設置爲可見來修改。在Form Editing模式下，可以通過editoptions參數來設置是否可以修改隱藏列。
edittype
可選的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默認值是text。
根據名字就可以看出來，這個屬性是設置編輯框的HTML樣式的。比如，設置爲text值，並且可以在editoptions中設置size以及maxlength等屬性。這樣生成的HTML樣式有點類似<input type="text" size="10" maxlength="15"/>這樣。
其中有幾個要注意：
設置checkbox的時候，需要在editoptions中指定value值，第一個值應該是checked的時候的值。比如editoptions:{value:"Yes:No"}會設定這個checkbox編輯框，選中的時候，值是Yes，沒選中的時候值是No。建議最好都設定一下這個值。
設置select的時候，editoptions中需要設定select下拉框的值。
一種方式是用字符串設置editoptions的value屬性，像這樣editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }，這就爲下拉框設置了三個可選值。注意，冒號前面的代表的是值，冒號後面代表的是顯示值。
第二種方式是用對象來設置editoptions的value屬性，這個時候，value值要用{}包括起來，像這樣： editoptions:{value:{1:'One',2:'Two'}}。
第三種方式，是爲editoptions設置dataUrl參數。意思就是select的值，是通過一個URL來獲取的，比如一個Ajax請求的返回值。特別需要注意的是，在這種情況下，URL的返回值必須是包括select以及option這些HTML標籤的。就像這樣：<select><option value="1">One</option><option value="2">Two</option></select>.這種情況下，還可以在editoptions中設置是否允許多選，size等等。
設置image的時候，editoptions的src屬性用來指定圖片的地址。
custom類型就是通過一個函數來指定需要編輯的元素，並返回需要提交的值。
函數的定義在editoptions中說明，分別是custom_element用來指定哪一個函數用來創建編輯框，注意這裏函數必須返回一個新的DOM元素，函數的參數一個是值Value，另外一個是colModel的editoptions值。
另外一個是custom_value，這個函數用來在編輯完成之後返回本編輯框的值，這個函數的參數是元素對象。大概的調用格式如下：
<script>
//創建一個input輸入框
function myelem (value, options) {
var el = document.createElement("input");
el.type="text";
el.value = value;
return el;
}
//獲取值
function myvalue(elem) {
return $(elem).val();
}
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
});
</script>
editoptions
除了上面介紹的editoptions選項外，我們還可以設置defaultValue等等，更復雜的東西，比如dataEvents就不介紹了。
editrules
editrules是用來設置一些可用於可編輯列的colModel的額外屬性的。大多數的時候是用來在提交到服務器之前驗證用戶的輸入合法性的。比如editrules:{edithidden:true, required:true....}。
可選的屬性包括：
edithidden：只在Form Editing模式下有效，設置爲true，就可以讓隱藏字段也可以修改。
required：設置編輯的時候是否可以爲空（是否是必須的）。
number：設置爲true，如果輸入值不是數字或者爲空，則會報錯。
integer：
minValue：
maxValue：
email：
url：檢查是不是合法的URL地址。
date：
time：
custom：設置爲true，則會通過一個自定義的js函數來驗證。函數定義在custom_func中。
custom_func:傳遞給函數的值一個是需要驗證value，另一個是定義在colModel中的name屬性值。函數必須返回一個數組，一個是驗證的結果，true或者false，另外一個是驗證錯誤時候的提示字符串。形如[false,”Please enter valid value”]這樣。
自定義驗證的例子：
<script>
function mypricecheck(value, colname) {
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 },
...
]
...
});
</script> < function mypricecheck(value, colname) { 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（只在Form Editing方式下有效），他的主要作用是用來重新排序Form中的編輯元素，同時可以在編輯元素前或者編輯元素後增加一些信息（比如，一些提示信息，或者一個紅色的*表示必須要填寫等等）。
可選的屬性如下：
elmprefix：字符串值，如果設置了，則會在編輯框之後出現一些內容(可能是HTML的內容)
elmsuffix：字符串值，如果設置了，則會在編輯框之前出現一些內容(可能是HTML的內容)
label：字符串值，如果設置了，則這個值會替換掉colNames中的值出現作爲該編輯框的標籤顯示
rowpos：數字值，決定元素行在Form中的位置（相對於文本標籤again with the text-label）
colpos：數字值，決定元素列在Form中的位置（相對於標籤again with the label）
兩個編輯框可以有相同的rowpos值，但是colpos值不同，這會把這兩個編輯框放到Form的同一行中。
特別注意：如果設置了rowpos以及colpos的值，強烈推薦爲所有的其他編輯元素都設置這些值。
參考網址：原文