jqGrid使用整理

jqGrid使用整理

jqGrid是一款處理表格展現的jQuery插件，支持分頁、滾動加載、搜索、鎖定、拖動等一系列對表格的常規操作。以下是最近項目中實踐jqGrid的整理

 

1、引入到項目中來

jqGrid的主頁在http://www.trirand.com/blog/ ，上面提供了下載、demo、wiki等文檔，都比較詳盡。特別是http://www.trirand.com/jqgridwiki/doku.php 中值得開發中多多關注。好了，下載后需要在項目的頭文件中引入：

 

<link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="$request.contextPath/script/jqGrid/js/i18n/grid.locale-cn.js"></script>

jqGrid采用了jQueryUI的CSS主題，需要下載相應的主題http://jqueryui.com/themeroller/ 找到相應的主題下載，如果使用了datepicker控件，還需要ui。如下：

<link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/jquery-ui-1.8.22.custom.css" media="all"/>
<script type="text/javascript" src="$request.contextPath/script/ui/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="$request.contextPath/script/ui/jquery.ui.datepicker-zh-CN.js"></script>

 

2、在頁面中使用

在頁面中如vm、jsp中使用，需要兩個基本的元素

<table id="jqGridId"></table> //這個是必須的
<div id="pager"></div> //這個是顯示分頁bar的信息，根據需要

然后在js中

$("#jqGridId").jqGrid({options})

這樣就是一個最基本的設置，重點是在這里的options上，包括基本參數設定和函數。具體可見官網的文檔：

 寫道

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

 

 3、參數(options)

參數是指jqGrid對象中設置各種特性的屬性，具體的設置在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

下面一個例子，羅列了常用的參數，並對參數進行了說明：

$("#jqGridId").jqGrid({
    url: s2web.appURL + "jq/queryWare.action",
    datatype:"local", //為local時初始化不加載，支持json，xml等
    mtype: "POST",
    colNames:['編號', '作者', 'ISBN','重量','描述'], //表頭
    colModel:[ //這里會根據index去解析jsonReader中root對象的屬性，填充cell
        {name:'id', index:'id', width:55, align:"center",sortable:false},
        {name:'author', index:'author', width:100, sortable:false},
        {name:'isbn', index:'isbn', width:120,align:"right", sortable:false},
        {name:'weight', index:'weight', width:80,align:"center", sortable:false},
        {name:'wareDesc', index:'wareDesc', width:400, sortable:false}
    ],
    width: 'auto', //數字 & 'auto','100%'
    height: 200,
    rowNum: 5, //每頁記錄數
    rowList:[5, 10,20,30], //每頁記錄數可選列表
    pager: '#pager2', //分頁標簽divID
    viewrecords: true, //顯示記錄數信息，如果這里設置為false,下面的不會顯示 recordtext: "第{0}到{1}條, 共{2}條記錄", //默認顯示為{0}-{1} 共{2}條 scroll: false, //滾動翻頁，設置為true時翻頁欄將不顯示
    /**這里是排序的默認設置，這些值會根據列表header點擊排序時覆蓋*/ sortable: false,
    sortname: "warename",
    sortorder: "desc",

    caption:"商品列表", //顯示查詢結果表格標題
    rownumbers: true, //設置列表顯示序號,需要注意在colModel中不能使用rn作為index
    rownumWidth: 20, //設置顯示序號的寬度，默認為25
    multiselect: true, //多選框
    multiboxonly: true, //在點擊表格row時只支持單選，只有當點擊checkbox時才多選，需要multiselect=true是有效
    prmNames : { //如當前查詢實體為ware，這些可以在查詢對象的superObject中設定
        page: "wareDetail.page",
        rows: "wareDetail.rows",
        sort: "wareDetail.sidx",
        order: "wareDetail.sord",
        search: "wareDetail.search"
    },
    jsonReader:{ //server返回Json解析設定
        root: "list", //對於json中數據列表
        page: "page",
        total: "totalPage",
        records: "totalCount",
        repeatitems: false,
    }
});

$("#jqGridId").jqGrid('navGrid','#pager2'{edit:false,add:false,del:false,search:false});//這里設定分頁bar顯示的信息

 以上各個參數的含義已經做了說明，具體可見上面文檔的詳細介紹。

 

prmNames: 這些參數每次會作為請求參數傳遞給server端，一般維持分頁、排序等信息。可在查詢對象中統一聲明這些屬性，與這里設置保持一致。如：

public class JqGridQueryBase implements Serializable {

    private static final long serialVersionUID = -2849625318773684220L;

    /** 當前頁面 */
    private int               page;
    /** 每頁的記錄數 */
    private int               rows;
    /** 查詢字段值 */
    private String            search;
    /** 排序字段和排序方式如：username/asc */
    private String            sidx;
    private String            sord;

    /** 分頁信息:總記錄數 */
    private int               totalCount;

 

jsonReader: 與prmNames一樣，是與server端Json格式交互的解析方式，root元素是一個json數組，解析colModel中的元素，而其他則涉及分頁等信息。比如我們在Action中每次返回的對象為PageModule，可定義為：

public class PageModule<T> extends JqGridQueryBase {

    private static final long serialVersionUID = -663611670315885315L;
    /** 查詢返回結果數據 */
    private List<T>           list             = new ArrayList<T>();

 

colModel： colModel對json數組中對象如何解析填充到表格的cell的設定，包括基本的name、index、width、formater等，具體見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

比如下設置：

• 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、還支持custom的方式

以上個參數含義來自http://blog.csdn.net/jpr1990/article/details/6891115

比如對價格需要加前綴和分割可以如下設定：

{name:'price',index:'price', width:80,align:"right", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},

支持下拉select的設定：

{name:'valid',index:'valid', width:100,align:"center", formatter:'select',edittype:'select', editoptions:{value:"0:現貨;1:可配貨;2:無貨"}}

顯示鏈接：

{name:'warename', index:'warename', width:300,sortable:false, formatter:'showlink', formatoptions:{baseLinkUrl:'query.action', addParam: '&action=edit'}},

 

 

 

4、常用方法(methods)

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

jqGrid支持兩種方式調用函數方法：

jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );

下面是新的API，推薦使用新的調用方法，也支持鏈式調用,如：

jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

 

 

1、新增{rowid, data, position(first、before、last、after)}

$("#jqGrid_id").jqGrid("addRowData", "1" ,{'name':'zhangsan', 'age': 20}, "first" );

2、清空grid

$("#jqGrid_id").jqGrid("clearGridData");

3、返回當前grid序號

$("#jqGrid_id").jqGrid('getDataIDs');

4、根據rowID獲取當前row的值

$("#jqGrid_id").jqGrid('getRowData', rowIds[i]);

5、設置某row值

$("#jqGrid_id").jqGrid('setRowData', rowIds[i], {});

 一個例子：需要對grid中的數據進行循環遍歷獲取、設置、更改

var rowIds = $("#jqGrid_id").jqGrid('getDataIDs');
if(rowIds){
    for(var i = 0, j = rowIds.length; i < j; i++) {
        var curRowData = $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);
        //curRowData = {"name1":"value1","name2":"value2","name3":"value3"...}
        if(curRowData['name1'] == ""){
            //dosomething
        }
        //更改:更改name1的值
        $.extend(curRowData, {"name1":"newValue1"})
        $("#jqGrid_id").jqGrid('setRowData', rowIds[i], curRowData);
    }
}

6、獲取grid參數.

name表示grid的options：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

$("#jqGrid_id").jqGrid('getGridParam','name');

7、設置grid參數，與上面的方法對應

$("#jqGrid_id").jqGrid('setGridParam', 'name');

如下常見需要獲取的參數：

#獲取總記錄數
$("#jqGrid_id").jqGrid('getGridParam','records');
#獲取請求參數
$("#jqGrid_id").jqGrid('getGridParam','postData');
#獲取選中的row，返回string
$("#jqGrid_id").jqGrid("getGridParam","selrow");
#獲取選中的多個row，返回Array
$("#jqGrid_id").jqGrid("getGridParam","selarrrow");

例子：對當前默認請求添加新的請求參數

var postData = $("#jqGrid_id").jqGrid('getGridParam','postData'); $.extend(postData , {"name1":"newValue1"}) $("#jqGrid_id").jqGrid("setGridParam", {datatype: "json" }).trigger("reloadGrid", [{page:1}]);

同時，在實際的使用場景中，我們可能是需要選擇通過選擇表單的值再進行查詢：

$("#queryBtn").bind("click", function() {
    var sdata = {
        "ware.warename" : $("#warenameId").val(),
        "ware.number" : $("#numberId").val(),
        "ware.valid" : $("#validId").val()
    };
    var postData = $("#jqGridId").jqGrid("getGridParam", "postData");
    $.extend(postData, sdata);
    $("#jqGridId").jqGrid("setGridParam", {search: true}).trigger("reloadGrid", [{page:1}]);
});

8、刪除

$("#jqGrid_id").jqGrid("delRowData", rowid); //前台刪除

  在使用上述API進行批量刪除時，是根據rowid去刪除指定的行，但是在刪除過程中rowid會導致變化，如果采用下面的方式刪除會導致某些行不能被刪除：

var gr = $("#jqGrid_id").jqGrid("getGridParam","selarrrow"); //刪除選中的出庫單
for ( var i = 0, j = gr.length; i < j; i++) {
    $("#jwGrid_id").jqGrid('delRowData', gr[i]);
}

 在網上找到一個解決方案是：

var gr = $("#jqGrid_id").jqGrid("getGridParam","selarrrow"); //刪除選中的出庫單
for ( var i = 0, j = gr.length; i < j; i++) {
    $("#jwGrid_id").jqGrid('delRowData', gr[0]);
}

上述API是前端刪除，對於前后台交互的刪除的API：

$("#jqGrid_id").jqGrid("delGridRow", rowid);

 下面是一個刪除的例子：

$("#removeBtn").bind("click", function(){
    var gr = $("#jqGridId").jqGrid('getGridParam','selrow');
    if(gr){
        var rowData = $("#jqGridId").jqGrid("getRowData", gr);
        $("#jqGridId").jqGrid('delGridRow', gr ,{
            top: 100,
            left: 400,
            reloadAfterSubmit:false,
            modal: true,                            //模態窗口
            url: s2web.appURL + "jq/del.action",    //覆蓋editUrl
            jqModal: true,
            beforeSubmit: function(postData, formid){// id=value1,value2,...
                var editData = {
                        "ware.id": rowData.id
                };
                postData = $.extend(postData, editData);
                console.log(postData);
                return[true,"success"];
            },
            afterSubmit: function(xhr, postData){   //返回[success, message, new_id]
                console.log(postData);
                if(xhr.responseText == "\"1\""){
                    //alert("保存成功");
                    return [true,"保存成功",postData.id];  //message is ignored if success is true
                }
                return [false,"保存失敗",postData.id];
            }
        });
    }else{
        alert("請選擇要刪除的數據");
    }
});

 

 5、事件(Event)

作為jqGrid的各種事件屬性，用來監聽相應的事件，如選擇行、完成加載、多選等時候觸發。API參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events，這里還介紹了關聯事件的執行順序：

寫道

Below is the execution order of the events when a ajax request is made  
1、beforeRequest 
2、loadBeforeSend 
3、serializeGridData 
4、loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.) 
5、beforeProcessing 
6、gridComplete 
7、loadComplete

 下面的例子是在開發中比較關注的onSelectRow和gridComplete事件，完成如下功能：在選中行時獲取當前行的數據並以某種方式查看數據，在列表加載完時計算列表中各個行的某列的合計值等：

   //設置multiselect checkbox's value,設置總的稱重和件數
   gridComplete: function(){
    var rowIds = $("#wmsjQContentTableId").jqGrid('getDataIDs');
    var totalWeight = 0,totalNumber = 0;
          for(var i = 0, j = rowIds.length; i < j; i++) {
             var curRowData = $("#wmsjQContentTableId").jqGrid('getRowData', rowIds[i]);
             var curChk = $("#"+rowIds[i]+"").find(":checkbox");
             curChk.attr('name', 'wmsCheckboxname');
             curChk.attr('value', curRowData['outStockCode']);
             if(curRowData['weight'] != ""){
               totalWeight += parseFloat(curRowData['weight']);
             }
             if(curRowData['number'] != ""){
               totalNumber += parseFloat(curRowData['number']);
             }
          }
        $("#totalWeighId").val(totalWeight);
        $("#totalPackNumId").val(totalNumber);
},

//行選中時更新稱重、件數、出庫單
onSelectRow: function(ids){
    var rowData = $("#wmsjQContentTableId").jqGrid("getRowData", ids);
    $("#curWeighId").val(rowData['weight']);
    $("#packNumId").val(rowData['number']);
    $("#curWmsOutStockCodeId").val(rowData['outStockCode']);
}

考慮如下一種場景，在列表的最后一列一般會有要求操作欄，提供刪除、修改等操作，那么同樣也可以通過gridComplete事件來實現：

colNames:['商品編號', '商品名稱', '單價','采購日期','庫存','狀態','操作'],//表頭
在colModel中有一列空值占位，注意index不要和json中重復
{name:'act',        index:'act',        width:150}

 在gridComplete事件中：

   gridComplete: function(){
    var ids = $("#jqGridId").jqGrid('getDataIDs');
    for(var i=0, j=ids.length; i < j; i++){
        var cl = ids[i];
        be = "<input style='height:22px;width:40px;' type='button' value='編輯' onclick=\"$('#jqGridId').editRow('"+cl+"');\"  />&nbsp;&nbsp;";
        //se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"$('#jqGridId').saveRow('"+cl+"');\"  />&nbsp;&nbsp;";
        se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"customSaveRow('"+cl+"');\"  />&nbsp;&nbsp;";
        ce = "<input style='height:22px;width:40px;' type='button' value='取消' onclick=\"$('#jqGridId').restoreRow('"+cl+"');\" />";
        $("#jqGridId").jqGrid('setRowData',ids[i], {act: be + se + ce});
    }
},

 

6、其他

凍結行、列

 

jqGrid有提供對column、header、column with group header的凍結，

需要設置兩處：

 

colModel中的frozen:true
$("#grid").jqGrid('setFrozenColumns');

但是jqGrid對凍結的支持並不是那么強大，只能支持依次從左到右凍結，如果中間設置有一個cell沒有設置，那么該row以后的cell即使設置了也不起作用

在官方的DOC中列出了使用限制：

 寫道

The following limitations tell you when frozen columns can not be set-up
When TreeGrid is enabled
When SubGrid is enabled
When cellEdit is enabled
When inline edit is used - the frozen columns can not be edit.
When sortable columns are enabled - grid parameter sortable is set to true or is function
When scroll is set to true or 1
When Data grouping is enabled

 動態改變設置：當然這里id、name都是依次從左到右的元素

 $("#changeBtn").bind("click", function() {

$("#jqGridId").jqGrid('destroyFrozenColumns')
.jqGrid('setColProp','id', {frozen:true})
.jqGrid('setColProp','name', {frozen:true})
.jqGrid('setFrozenColumns')
.trigger('reloadGrid', [{current:true}]);
);

 

 

 

 

 

7、參考以下文章

doc:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
colmodel_options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
方法
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
事件
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

其他

http://blog.csdn.net/gengv/article/category/648499

http://www.trirand.com/jqgridwiki/doku.php

http://trirand.com/blog/jqgrid/jqgrid.html

 

 

原文鏈接：http://mj4d.iteye.com/blog/1628851