天天看點
傳回

jqGrid學習筆記一、jqGrid的加載。二、jqgrid的重要選項三、 注意事項

一、jqGrid的加載。

1.引用相關頭檔案

引入CSS：

<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />

引入JS：

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

因為jqGrid3.6及以後的版本內建了jQuery UI，是以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言檔案必須在jquery.jqGrid.min.js之前加載，否則會出問題。

2.将jqgrid加入頁面中

根據jqGrid的文檔，要想生成一個jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是頁面上的一個table：

<table id="list"></table>

下面是一個簡單的例子：

<script type="text/javascript">
  $(document).ready(function () {
    jQuery("#list").jqGrid({
      url: 'Handler.ashx',
      datatype: "json",
      mtype: 'GET',
      colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
      colModel: [{
        name: 'SalesReasonID',
        index: 'SalesReasonID', 
        width: , 
        align: "left", 
        editable: true 
      }, { 
        name: 'Name', 
        index: 'Name', 
        width: , 
        align: "center" 
      }, { 
        name: 'ReasonType', 
        index: 'ReasonType', 
        width: , 
        align: "center" 
      }, { 
        name: 'ModifiedDate', 
        index: 'ModifiedDate', 
        width: , 
        align: "center", 
        search: false 
      }],
      rowList: [, , ],
      sortname: 'SalesReasonID',
      viewrecords: true,
      sortorder: "desc",
      jsonReader: {
        root: "griddata",
        total: "totalpages",
        page: "currpage",
        records: "totalrecords",
        repeatitems: false
      },
      pager: jQuery('#pager'),
      rowNum: ,
      altclass: 'altRowsColour',
      //width: 'auto',
      width: '500',
      height: 'auto',
      caption: "DemoGrid"
    }).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
  })
</script>

二、jqgrid的重要選項

具體的options參考，可以通路jqGrid文檔關于option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：

url ：jqGrid控件通過這個參數得到需要顯示的資料，具體的傳回值可以使XML也可以是Json。

datatype ：這個參數用于設定将要得到的資料類型。類型包括：json 、xml、xmlstring、local、javascript、function。

mtype : 定義使用哪種方法發起請求，GET或者POST。

height ：Grid的高度，可以接受數字、%值、auto，預設值為150。

width ：Grid的寬度，如果未設定，則寬度應為所有列寬的之和；如果設定了寬度，則每列的寬度将會根據shrinkToFit選項的設定，進行設定。

shrinkToFit ：此選項用于根據width計算每列寬度的算法。預設值為true。如果shrinkToFit為true且設定了width值，則每列寬度會根據width成比例縮放；如果shrinkToFit為false且設定了width值，則每列的寬度不會成比例縮放，而是保持原有設定，而Grid将會有水準滾動條。

autowidth ：預設值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調用setGridWidth方法來完成。

pager ：定義頁碼控制條Page Bar，在上面的例子中是用一個p(

)來放置的。

sortname ：指定預設的排序列，可以是列名也可以是數字。此參數會在被傳遞到Server端。

viewrecords ：設定是否在Pager Bar顯示所有記錄的總數。

caption ：設定Grid表格的标題，如果未設定，則标題區域不顯示。

rowNum ：用于設定Grid中一次顯示的行數，預設值為20。正是這個選項将參數rows（prmNames中設定的）通過url選項設定的連結傳遞到Server。注意如果Server傳回的資料行數超過了rowNum的設定，則Grid也隻顯示rowNum設定的行數。

rowList ：一個數組，用于設定Grid可以接受的rowNum值。例如[10,20,30]。

colNames ：字元串數組，用于指定各列的題頭文本，與列的順序是對應的。

colModel ：最重要的數組之一，用于設定各列的參數。（稍後詳述）

prmNames ：這是一個數組，用于設定jqGrid将要向Server傳遞的參數名稱。（稍後詳述）

jsonReader ：這又是一個數組，用來設定如何解析從Server端發回來的json資料。（稍後詳述）

2.1 prmNames選項

prmNames是jqGrid的一個重要選項，用于設定jqGrid将要向Server傳遞的參數名稱。其預設值為：

prmNames : {
    page:"page", // 表示請求頁碼的參數名稱
    rows:"rows", // 表示請求行數的參數名稱
    sort: "sidx", // 表示用于排序的列名的參數名稱
    order: "sord", // 表示采用的排序方式的參數名稱
    search:"_search", // 表示是否是搜尋請求的參數名稱
    nd:"nd", // 表示已經發送請求的次數的參數名稱
    id:"id", // 表示當在編輯資料子產品中發送資料時，使用的id的名稱
    oper:"oper", // operation參數名稱
    editoper:"edit", // 當在edit模式中送出資料時，操作的名稱
    addoper:"add", // 當在add模式中送出資料時，操作的名稱
    deloper:"del", // 當在delete模式中送出資料時，操作的名稱
    subgridid:"id", // 當點選以載入資料到子表時，傳遞的資料名稱
    npage: null,
    totalrows:"totalrows" // 表示需從Server得到總共多少行資料的參數名稱，參見    jqGrid選項中的rowTotal
}

2.2 jsonReader選項

jsonReader是jqGrid的一個重要選項，用于設定如何解析從Server端發回來的json資料，如果Server傳回的是xml資料，則對應的使用xmlReader來解析。jsonReader的預設值為：

jsonReader : {
    root: "rows", // json中代表實際模型資料的入口
    page: "page", // json中代表目前頁碼的資料
    total: "total", // json中代表頁碼總數的資料
    records: "records", // json中代表資料行總數的資料
    repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜尋對應的資料元素（即可以json中元素可以不按順序）；而所使用的name是來自于colModel中的name設定。
    cell: "cell",
    id: "id",
    userdata: "userdata",
    subgrid: {
        root:"rows",
        repeatitems: true,
        cell:"cell"
    }
}

假如有下面一個json字元串：

{
"totalpages":"3",
"currpage":"1",
"totalrecords":"11",
"griddata":[{
    "SalesReasonID":"1",
    "Name":"Price",
    "ReasonType":"Other",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"2",
    "Name":"On Promotion",
    "ReasonType":"Promotion",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"3",
    "Name":"Magazine Advertisement",
    "ReasonType":"Marketing",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"4",
    "Name":"Television Advertisement",
    "ReasonType":"Marketing",
    "ModifiedDate":"1998年6月1日"
},{
    "SalesReasonID":"5",
    "Name":"Manufacturer",
    "ReasonType":"Other",
    "ModifiedDate":"1998年6月1日"
}]
}

其對應的jsonReader為：

jsonReader: {
    root: "griddata",
    total: "totalpages",
    page: "currpage",
    records: "totalrecords",
    repeatitems: false
}

注：cell、id在repeatitems為true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以适用另一種json結構。援引文檔中的例子：

repeatitems為true時：

jQuery("#gridid").jqGrid({ 
     ... 
     jsonReader : { 
         root:"invdata", 
         page: "currpage", 
         total: "totalpages", 
         records: "totalrecords"
     }, 
     ... 
});

json結構為：

{  
"totalpages": "xxx",  
"currpage": "yyy", 
"totalrecords": "zzz", 
"invdata" : [{
    "id" :"1", 
    "cell" :[
        "cell11", 
        "cell12", 
        "cell13"
    ]},   // cell中不需要各列的name，隻要值就OK了，但是需要保持對應
    {
    "id" :"2", 
    "cell" :[
        "cell21", 
        "cell22", 
        "cell23"
    ]},
... 
]
}

repeatitems為false時：

jQuery("#gridid").jqGrid({ 
     ...
     jsonReader : { 
         root:"invdata", 
         page: "currpage", 
         total: "totalpages", 
         records: "totalrecords", 
         repeatitems: false, 
         id: "0"
     }, 
     ... 
});

json結構為：

{  
"totalpages" : "xxx",  
"currpage" : "yyy", 
"totalrecords" : "zzz", 
"invdata" : [{
    "invid" : "1",
    "invdate":"cell11", 
    "amount" :"cell12", 
    "tax" :"cell13", 
    "total" :"1234", 
    "note" :"somenote"
}, // 資料中需要各列的name，但是可以不按列的順序
    {
    "invid" : "2",
    "invdate":"cell21", 
    "amount" :"cell22", 
    "tax" :"cell23", 
    "total" :"2345", 
    "note" :"some note"
    }, 
... 
] 
}

2.3 colModel的重要選項

colModel也有許多非常重要的選項，在使用搜尋、排序等方面都會用到。這裡先隻說說最基本的。

name ：為Grid中的每個列設定唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。

index ：設定排序時所使用的索引名稱，這個index名稱會作為sidx參數（prmNames中設定的）傳遞到Server。

label ：當jqGrid的colNames選項數組為空時，為各列指定題頭。如果colNames和此項都為空時，則name選項值會成為題頭。

width ：設定列的寬度，目前隻能接受以px為機關的數值，預設為150。

sortable ：設定該列是否可以排序，預設為true。

search ：設定該列是否可以被列為搜尋條件，預設為true。

resizable ：設定列是否可以變更尺寸，預設為true。

hidden ：設定此列初始化時是否為隐藏狀态，預設為false。

formatter ：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等（具體參見文檔 ）。

三、 注意事項

  1. 動态改變Add Form或者Edit Form中的select的内容，如：改變下圖中的Comparator下拉中的内容。
    jqGrid學習筆記一、jqGrid的加載。二、jqgrid的重要選項三、 注意事項
$("#list_d").navGrid('#pager_d',{
    add:true,
    edit:true,
    del:true,
    search:false,
    refresh:false
},{
    checkOnSubmit:false, 
    closeAfterEdit: true,
    recreateForm:true,
    beforeInitData:function(formid){
        initComparator();
    },
    beforeShowForm: function(formid){
        $("#list_d").jqGrid('setColProp', 'Name', { 
            editrules:{required:false},
        });
    $('#tr_Name', formid).hide();
    }
}，//edit
{},//add
{}//del
）

beforeInitData, beforeShowForm在每次點選編輯的時候都會執行。initComparator的作用是通過ajax擷取資料，然後利用

$("#list_d").jqGrid('setColProp', 'Comparator', { 
    editoptions: { 
        value: valueString
    } 
});

來設定Comparator下拉中的内容。其中valueString的格式如下’equal to: equal to; not equal to: not equal to’。鍵值之間用冒号隔開，2項之間用分号隔開。注意：把recreateForm設為true，否則’setColProp’隻在第一次調用時有效。

2.

var rowNum = parseInt($(this).getGridParam("records"), 10);

得到資料條數。

3.

jQuery("#list_d").clearGridData();

清空資料。

4.

jQuery("#list").getCell(ids,"Key");

擷取第ids行的key列。

5.

$("#list").jqGrid('setSelection', "1");

選中第一行。放在loadComplete：中在gird加載完成的時候自動選中第一行。

loadComplete:function(data){
    $("#list").jqGrid('setSelection', "1");
}
  1. 對于像1中的可編輯的字段，可以設定rule，參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
  2. 修改Option，以URL為例 
jQuery("#list_d").jqGrid('setGridParam',{
    url:"xxx.aspx",
    page:
}).trigger('reloadGrid');

摘自 Hurry的專欄

插件 jqGrid
上一篇: Mybatis 類型轉換器
下一篇: Java資料結構-------HashSet

繼續閱讀