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樣式有點類似這樣。
其中有幾個要注意:
設定checkbox的時候,需要在editoptions中指定value值,第乙個值應該是checked的時候的值。比如editoptions: 會設定這個checkbox編輯框,選中的時候,值是yes,沒選中的時候值是no。建議最好都設定一下這個值。
設定select的時候,editoptions中需要設定select下拉框的值。
一種方式是用字串設定editoptions的value屬性,像這樣editoption: ,這就為下拉框設定了三個可選值。注意,冒號前面的代表的是值,冒號後面代表的是顯示值。
第二種方式是用物件來設定editoptions的value屬性,這個時候,value值要用{}包括起來,像這樣: editoptions:}。
第三種方式,是為editoptions設定dataurl引數。意思就是select的值,是通過乙個url來獲取的,比如乙個ajax請求的返回值。 特別需要注意的是,在這種情況下,url的返回值必須是包括select以及option這些html標籤的。就像這 樣:one
two.這種情況下,還可以在editoptions中設定是 否允許多選,size等等。
設定image的時候,editoptions的src屬性用來指定的位址。
custom型別就是通過乙個函式來指定需要編輯的元素,並返回需要提交的值。
函式的定義在editoptions中說明,分別是custom_element用來指定哪乙個函式用來建立編輯框,注意這裡函式必須返回乙個新的dom元素,函式的引數乙個是值value,另外乙個是colmodel的editoptions值。
另外乙個是custom_value,這個函式用來在編輯完成之後返回本編輯框的值,這個函式的引數是元素物件。大概的呼叫格式如下:
editoptions
除了上面介紹的editoptions選項外,我們還可以設定defaultvalue等等,更複雜的東西,比如dataevents就不介紹了。
editrules
editrules是用來設定一些可用於可編輯列的colmodel的額外屬性的。大多數的時候是用來在提交到伺服器之前驗證使用者的輸入合法性的。比如editrules:。
可選的屬性包括:
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」]這樣。
自定義驗證的例子:
< function mypricecheck(value, colname) jquery("#grid_id").jqgrid(, 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的值,強烈推薦為所有的其他編輯元素都設定這些值。
jqGrid 自定義搜尋
jquery mysearch filtergrid grid id options options 引數 引數描述 預設值gridmodel 當為ture我們會使用colmodel中的屬性構造查詢條件,所用到的引數 name,index,edittype,editoptions,search.還有...
自定義jqgrid 選單欄
經過再次研讀 發現其實修改自定義的選單欄的問題其實很簡單,就直接修改grid.locale cn.js檔案就可以了,在js中直接引用就好了,下面的內容看來是多餘的 直接看 recordtext 記錄 總記錄數 顯示記錄數的格式 emptyrecords 無資料 空記錄時的提示資訊 pgtext 頁數...
jqGrid 自定義格式化
jquery grid id jqgrid function currencyfmatter cellvalue,options,rowobject do something here return new format value cellvalue 要被格式化的值 options 對資料進行格式...