jqGrid的使用方法(編輯,刪除,更新,新增)
阿新 • • 發佈：2018-12-25
暫時先不管這三種方式，我們來看看如何讓一個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'
根據名字就可以看出來，這個屬性是設定編輯框的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>