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元素,如2e6435b1c650e24d96a0e84f220b633316b28748ea4df4d9c2150843fecfba68 | empty |
pagerpos | string | 定義表格瀏覽導覽條的位置,缺省情況下建立一個包含3部分的導覽條:頁碼,導覽按鈕和記錄資訊。 | center |
pgbuttons | boolean | 定義導航啟動時導航按鈕是否顯示。 | true |
pginput | boolean | 定義導覽列是否有頁碼輸入框。 | true |
pgtext | string | 當前頁資訊。第一個量為目前頁,第二個量為總頁數。 | |
prmNames | array | By default prmNames: { page: "page", rows: "rows", sort: "sidx", order: "sord", search: "_search", nd: "nd", npage:null} Sent to the server in POST mode, the fields are: page, rows, sidx, sord, search, nd. For example, if you want to change sidx to mysort, you can write: prmNames: {sort: “mysort”}. In this way, the string submitted to the server will be Becomes: page=1&rows=10&mysort=myindex&sord=asc If some parameters are set to null, these parameters will no longer be sent to the server. For example prmNames: { nd:null} then the nd parameter will not be sent. For Npage parameters, see scroll option. | none |
postData | array | This array can be passed directly to the url. This array can be of the form {name1:value1…}. | empty |
recount | integer | Read-only attribute. Defines the number of rows displayed in the table. Not to be confused with records. | 0 |
recordpos | string | Define the position of recording information on the page, which can be left, center, or right. | right |
recordpos | object | Class for alternating rows | true |
records | integer | Read-only attribute. Define the number of records to get from the request | none |
recordtext | string | Prompt information that can be displayed on the page, this |