jqGrid提供了大量的選項設置,開發者可以通過設置選項對應值來控制jqGrid,比如表格的寬度、高度、數據類型以及列名稱等等都是通過選項設置來完成的。jqGrid的選項一般是名稱:值(name:value)的形式,也可以是對象(object)及數組(array)的形式配置。
jqGrid選項(Option)
調用jqGrid只需要執行以下代碼:
jQuery("#grid_id").jqGrid(options);
options即jqGrid的選項設置,請參照以下表格。
屬性 | 類型 | 描述 | 默認值 |
ajaxGridOptions | object | 此項用於設置當表格設置獲得數據時,ajax的全局屬性,注意此項可能覆蓋所有當前的ajax設置(包括error, complete和beforeSend 事件)。 | empty |
ajaxSelectOptions | object | 此項用於設置在editoptions或searchoptions對象中通過dataUrl選擇元素時, ajax的全局屬性。 | empty |
altclass | string | 交替行的類。 此項僅當altRows設置為true時有效。 | ui-priority-secondary |
altRows | boolean | 設置為交替行表格 | false |
autoencode | boolean | 當設置為true時,對來自服務器的數據和提交數據進行encodes編碼。如< 將被轉換為< | false |
autowidth | boolean | 當設置為true時,表格寬度將自動匹配到父元素的寬度。這個匹配只在表格建立時進行,為了使表格在父元素寬度變化時也隨之變化,可以使用setGridWidth方法 | false |
caption | string | 表格的標題。顯示在Header上。若為空時將不會顯示。 | empty |
cellLayout | integer | 該屬性確定單元格的padding + border 寬度。通常不修改該屬性,但若表格的CSS中改變了td元素,該屬性需要修改。 缺省值5表示paddingLef(2) + paddingRight(2) + borderLeft(1)=5 | 5 |
cellEdit | boolean | 是否允許單元格編輯。 | false |
cellsubmit | string | 確定單元格內容保存方式是remote還是clientArray 。 | 'remote' |
cellurl | string | 單元格保存的url。 | null |
colModel | array | 描述列參數數組。這是表格最重要的部分,詳見colModel API. | null |
colNames | array[] | 列名稱數組。該名稱將在Header中顯示。名稱以逗號分隔,數量應與colModel 數組數量相等 | empty |
data | array | 以數組的形式保存本地數據。 | empty |
datastr | string | 當datatype被設置為xmlstring或jsonstring時,為數據串。 | null |
datatype | string | 定義表格希望獲得的數據的類型,有效值有: Xml —xml數據 xmlstring—xml字符串 json—JSON數據 jsonstring—JSON字符串 local—客戶端數據(數組) javascript—javascript數據 function—函數返回數據 |
xml |
deselectAfterSort | boolean | 只適用於當datatype為local時。當一個排序被應用時取消當前選定行。 | true |
direction | string | 表格中的書寫方向。“ltr”從左到右(缺省值),“rtl”從右到左 | ltr |
editurl | string | 定義行內編輯地址URL | null |
emptyrecords | string | 當返回(或當前)數量為零時顯示的信息此項只用當viewrecords 設置為true時才有效。 | |
ExpandColClick | boolean | true時,點擊展開行的文字,treeGrid展開或收攏 | true |
ExpandColumn | string | 指定用於張開treeGrid的列(名稱來自colModel),未設置即用第一列。此項只有當treeGrid為true時有效. | null |
footerrow | boolean | 如果設置為true時,將生成一個表腳行,列數等於colModel | false |
forceFit | boolean | 如果設置為true,改變列寬,相鄰列也將調整以適應整體表格,將不會出現水平滾動條。 | false |
gridstate | string | 表格的當前狀態。有visible或hidden | visible |
gridview | boolean | 設置為true將提高5~10倍的顯示速度。但不能再使用treeGrid, subGrid, 或afterInsertRow事件 | false |
grouping | boolean | 是否設置表格組 | false |
height | mixed | 表格高度。可為數值、百分比或auto | 150 |
hiddengrid | boolean | 如果設置為true,表格開始被隱藏,數據不被載入,只顯示標題。當第一次點擊顯示/隱藏按鈕顯示表格,數據從服務器載入。 | false |
hidegrid | boolean | 是否允許顯示/隱藏按鈕可用。只有標題不為空時可用。 | true |
hoverrows | boolean | 表行是否有鼠標懸停效果 | true |
jsonReader | array | JSON數據結構數組 | |
lastpage | integer | 請求返回的總頁數 | 0 |
lastsort | integer | 排序的列號(0開始) | 0 |
loadonce | boolean | 設置為true時,表格只一次讀取服務器數據(使用適當datatype),之后,datatype 自動變為local ,所有進一步操作都在客戶端完成,pager功能(若存在)將失效。 | false |
loadtext | string | 數據請求和排序時顯示的文本 | Loading… |
loadui | string | 此項控制ajax進程進行時的動作。Disable—取消jqGrid的進程指示,可使用自定義的指示。 enable (缺省)—表格中間顯示loading。 block – 顯示“Loading”信息,禁用頁面上的所有功能,直到數據裝入完成。 | enable |
mtype | string | 定義提交類型POST或GET | GET |
multikey | string | 此屬性只有當multiselect為true時有效,定義多選時的組合鍵,可選值有: shiftKey ,altKey,ctrlKey | empty |
multiboxonly | boolean | 此屬性只有當multiselect為true時有效,. Multiboxonly設置為true時,只有點擊checkbox時該行才被選中,點擊其他列,將清除當前行的選中。 | false |
multiselect | boolean | 此屬性設為true時啟用多行選擇,出現復選框 | false |
multiselectWidth | integer | 若multiselect 為true時,定義多選列的寬度。 | 20 |
page | integer | 設置請求初始頁的數量,此參數通過URL從服務器接受數據 | 1 |
pager | mixed | 定義分頁瀏覽導航條。必須是一個HTML元素,如<div id="page"></div> | empty |
pagerpos | string | 定義表格瀏覽導航條的位置,缺省情況下建立一個包括3部分的導航條:頁碼,導航按鈕和記錄信息。 | center |
pgbuttons | boolean | 定義導航激活時導航按鈕是否顯示。 | true |
pginput | boolean | 定義導航欄是否有頁碼輸入框。 | true |
pgtext | string | 當前頁信息。第一個量為當前頁,第二個量為總頁數。 | |
prmNames | array | 缺省情況下prmNames: { page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 以POST方式發送到服務器,字段為: page,rows,sidx,sord,search,nd 例如要將sidx改為mysort,可寫成: prmNames: {sort: “mysort”}. 這樣提交到服務器的字符串就變為: page=1&rows=10&mysort=myindex&sord=asc 若將一些參數設為null,這些參數將不再發往服務器。例如prmNames: { nd:null} 則nd參數將不被發送。 Npage參數參見scroll option. | none |
postData | array | 此數組能直接傳遞到url。這個數組可使用這種形式{name1:value1…}。 | empty |
reccount | integer | 只讀屬性。定義表格顯示的行數。切勿與records混淆。 | 0 |
recordpos | string | 定義頁中記錄信息的位置,可以是left,center,right。 | right |
recordpos | object | 交替行的類 | true |
records | integer | 只讀屬性。定義從請求中獲得的記錄數 | none |
recordtext | string | 可在頁面上顯示的提示信息,此文字只在viewrecords 為true是有效,並且當記錄總數大於0時才顯示。 此文字中{}中的內容表示: {0} 該頁顯示的第一個記錄的記錄號 {1} 該頁顯示的最后一個記錄的記錄號 {2} 獲得的記錄總數 |
|
resizeclass | string | 列可變大小時的類 | empty |
rowList | array[] | 用於改變顯示行數的下拉列表框的元素數組。 | empty |
rownumbers | boolean | 若此屬性為true,表格左側將添加一用於顯示行數(從1開始)的列。此時colModel自動擴展出一個名為rn的元素。所以在colModel中不要定義rn。 | false |
rowNum | integer | 表格中可見的記錄數。此參數通過url傳遞給服務器供檢索數據用。注意:若此參數設置為10,而服務器返回15條記錄,將只有10條記錄被裝入。若此參數被設置為-1,則此檢查失效 | 20 |
rownumWidth | integer | 當rownumbers為true時,定義顯示行數的列的寬度。 | 25 |
savedRow | array | 只讀屬性。用於行編輯和單元格編輯保存數據之前 | empty |
scroll | boolean or integer | 創建動態滾動表格。當設為啟用時,pager被禁用,可使用垂直滾動條來裝入數據。 | false |
scrollOffset | integer | 定義垂直滾動條的寬度。 | 18 |
scrollrows | boolean | 該項啟用時,用setSelection 選定一行,表格將滾動到被選行可見。 | false |
selarrrow | array-[] | 只讀屬性。當multiselect 為true時,包含當前選定的行。此為一維數組,值為表格中選定行的ID。 | empty |
selrow | string | 只讀屬性。內容是最后選定行的ID。如火應用了排序或pagging,該值為null。 | null |
shrinkToFit | boolean or integer | 該項描述計算每列相對於表格寬度的初始寬度的類型。 若為true,並且設置了列寬度,則每列的寬度根據定義寬度縮放。 若為false,並且設置了列寬度,表格寬度為設置寬度,列寬度不會重新計算,使用colModel中定義的值 |
true |
sortable | object | 啟用此項,允許使用鼠標重新排序列。 | true |
sortname | string | 從服務器讀取XML或JSON數據時初始的排序名,此名被加到URL中。 | empty |
sortorder | string | 從服務器讀取XML或JSON數據時初始的排序類型,此類型被加到URL中。可選值為asc或desc。 | asc |
subGrid | boolean | 設置為true,可使用子表格。啟用子表格,將在基本表的左邊將添加一列,並包含一個“+”圖像,用戶可以點擊擴展行。 | false |
subGridModel | array-[] | 該屬性用於描述子表格的模式,只有subGrid 為true時有效。它是一個用於描述子表格列的數組。 | empty |
subGridType | mixed | 用於定義子表格裝入的數據類型,若不定義,則使用與父表格同樣的數據類型。 | null |
subGridUrl | string | 該屬性用於定義子表格獲得數據的URL。行的ID將鍵入此URL中,若要添加其他參數,可使用subGridModel 中的選項。 | empty |
subGridWidth | integer | 定義子表格的列寬 | 20 |
toolbar | array | 該參數定義表格的工具欄。參數是一個包含兩個值的數組,第一個值使工具欄有效,第二個值相對位置(可以是top、bottom、both)。例如:設置toolbar為 [true,”both”],將在表格的頭部和底部建立兩個工具欄,兩個工具欄位兩個DIV元素,頭部DIV元素的ID為“t_表格ID”,底部DIV元素的ID為“tb_表格ID”。若只有一個工具欄(top或bottom)時,DIV的ID為“t_表格ID”。 | [false,''] |
toppager | boolean | 是否在表格上部顯示分頁條。 | false |
totaltime | integer | 只讀參數。用於記錄裝入XML和JSON數據的時間。 | 0 |
treedatatype | mixed | 定義初始數據類型 | null |
treeGrid | boolean | 啟用(禁用)TreeGrid。 | false |
treeGridModel | string | 定義TreeGrid的方法。可以是nested或adjacency。 | nested |
treeIcons | array | 此數組設置TreeGrid中使用的圖標。圖標應是UI theme中的有效圖標。缺省為 {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | |
treeReader | array | 擴展表格的colModel。這里定義的字段將添加到colModel的尾部並隱藏。服務器將返回這些字段的值。 | |
tree_root_level | numeric | 確定treeGrid相對於根元素的級別。 | 0 |
url | string | 請求數據的url地址 | null |
userData | array | 此數組保存請求的自定義信息,可隨時使用 | empty |
userDataOnFooter | boolean | 到為true時, userData直接放置在頁腳。 | false |
viewrecords | boolean | 是否在瀏覽導航欄顯示記錄總數 | false |
viewsortcols | array | 定義表頭中排序圖標的外觀和行為。缺省為[false,'vertical',true]。 第一個參數設定是否顯示所有定義了排序的列旁顯示圖標。缺省的false表示只有當前排序列旁的圖標顯示。設為true可使所有可排序列都顯示圖標。 第二個參數設定排序圖標如何放置。vertical為垂直放置,horizontal為水平放置。 第三個參數設定點擊功能。True表示表頭點擊排序,false表示只點擊排序圖標排序。若將此參數設為false時,請確保第一個參數為true,否則將無法排序。 |
|
width | number | 若為設置,表格的寬度為colModel 中定義的所有列寬度的總和。若設置了該項,每列的初始寬度按照shrinkToFit 設置的值 | none |
xmlReader | array | 描述預期的XML數據結構的數組。 |
ColModel API
colModel屬性以數組的形式定義各個表格列。這是jqGrid中很重要的部分。語法為:
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});
屬性 | 類型 | 描述 | 默認值 |
align | string | 定義表格單元格(非表頭)的對齊方式,可取值:left, center, right. | left |
classes | string | 此屬性用於定義列的類名,當有多個類名時,用空格間隔,例如:“class1 class2”。在表格的CSS中,有一個預定義的類ui-ellipsis用於定義特定的行 | empty |
datefmt | string | 日期格式,可用/,-和.。作為間隔符。y、Y、yyyy用於4位年,YY、yy用於2位的月,d、dd用於日期 | Y-m-d |
defval | string | 搜索字段的缺省值,此參數只用於自定義搜索是的初始值。 | empty |
editable | boolean | 定義字段是否可編輯,用於單元格編輯、行編輯和表單模式 | false |
editoptions | array | 根據edittype 參數定義可用的值數組 | empty |
editrules | array | 設置可編輯字段的補充規則 | empty |
edittype | string | 定義行編輯和表單模式的編輯類型,可以是text、textarea、select、checkbox、 password、button、image和file。 | text |
fixed | boolean | 若設為true,即使shrinkToFit設置為true,列寬也不允許重新計算。GridWidth方法改變表格寬度時,列寬也不會改變。 | false |
formoptions | array | 定義表單編輯的各種選項 | empty |
hidedlg | boolean | 若設置為true,該列將不出現在模式對話框中,用戶可以此控制列的顯示或隱藏 | false |
hidden | boolean | 定義初始化時,列是否隱藏。 | false |
index | string | 通過sidx參數設置排序時的索引名。 | empty |
key | boolean | 在未從服務器獲得ID的情況下,該列可設置為行ID。只有一列可設置該屬性,若出現多列,表格只采用將第一個設置了該屬性的列,其他列忽略。 | false |
label | string | 當colNames數組為空時,定義此列的標題。若colNames數組和此屬性都為空,標題為該列的name屬性值。 | none |
name | string | 設置列在表格中的唯一名稱,此屬性是必須的。或者使用保留字subgrid、cb和rn. | Required |
resizable | boolean | 定義是否可變列寬 | true |
sortable | boolean | 定義是否可以排序 | true |
sorttype | mixed | 當datatype為local時,用於定義排序列類型。可取int/integer(整數)、float/number/currency(小數)、date(日期)、text(文本) | text |
title | boolean | 當設置為false時,鼠標滑向單元格時不顯示title屬性 | true |
width | number | 設置列的初始寬度,可用pixels和百分比 | 150 |