jqGrid學習筆記（二）

本文原文為：http://www.huosen.net/archives/147.html

本節介紹jqGrid其他的使用方法，主要是一些基本操作，特殊的資料顯示等。

1 重新整理jqGrid資料。 常用到重新整理jqGrid資料的情況是，在用到查詢的時候，根據查詢條件，請求資料，並重新整理jqGrid表格，使用方式如下：

$("#search_btn").click(function(){    //此處可以添加對查詢資料的合法驗證    var orderId = $("#orderId").val();    $("#list4").jqGrid('setGridParam',{        datatype:'json',        postData:{'orderId':orderId}, //發送資料        page:1    }).trigger("reloadGrid"); //重新載入});

① setGridParam用於設定jqGrid的options選項。返回jqGrid對象
② datatype為指定發送資料的格式；
③ postData為發送請求的資料，以key:value的形式發送，多個參數可以以逗號”,”間隔；
④ page為指定查詢結果跳轉到第一頁；
⑤ trigger(“reloadGrid”);為重新載入jqGrid表格。 2 無資料的提示資訊。 當後台返回資料為空白時，jqGrid本身的提示資訊在右下角，不是很顯眼 ，下面方法將實現在無資料顯示的情況下，在jqGrid表格中間位置提示“無資料顯示”。如下圖：當然，你的div樣式可以設定的更好看些。

loadComplete: function() {//如果資料不存在，提示資訊    var rowNum = $("#list4").jqGrid('getGridParam','records');    if (rowNum      if($("#norecords").html() == null){            $("#list4").parent().append("</pre><div id="norecords">沒有查詢記錄。</div><pre>");        }        $("#norecords").show();    }else{//如果存在記錄，則隱藏提示資訊。        $("#norecords").hide();    }}

① loadComplete 為jqGrid載入完成，執行的方法； ② getGridParam這個方法用來獲得jqGrid的選項值。它具有一個選擇性參數name，name即代表著jqGrid的選項名，如果不傳入name參數，則會返回jqGrid整個選項options。例：

$("#list4").jqGrid('getGridParam','records');//擷取當前jqGrid的總記錄數；

注意：這段代碼要加在jqGrid的選項設定Option之間，即：$(“#list4″).jqGrid({});代碼之間。且各個option之間加逗號間隔。 3 顯示jqGrid統計資訊。 通常統計資訊都顯示在jqGrid表格最後一行，分頁控制項之上，如下圖：

程式碼片段：

$("#list4").jqGrid({    ......    colModel:[        {name:'productName',index:'productName',align:'center',sortable:false},        {name:'productAmt',index:'productAmt', align:'center'}    ],    footerrow: true,//分頁上添加一行，用於顯示統計資訊    ......    pager:$('#gridPager'),    gridComplete: function() {//當表格所有資料都載入完成，處理統計行資料        var rowNum = $(this).jqGrid('getGridParam','records');        if(rowNum > 0){            var options = {                url: "test.action",// 預設是form的action，如果寫的話，會覆蓋from的action.                dataType: "json",// 'xml', 'script', or 'json' (接受服務端返回的類型.)                type: "POST",                success: function(data){//成功後調用方法                    $("#list4").footerData("set",{productName:"合計",productAmt:data.productAmtSum});                }            };            $("#searchForm").ajaxSubmit(options);        }    }});

詳細介紹：

3.1jqGrid的options配置； 需要在jqGrid的options中添加如下屬性：

footerrow: true,//分頁上添加一行，用於顯示統計資訊

3.2  調用gridComplete方法，當資料載入完成後，處理統計行資料；  3.3 調用jqGrid的footerData方法，為統計行賦值：

$("#list4").footerData("set",{productName:"合計",productAmt:data.productAmtSum});

4 jqGrid的資料格式化。 jqGrid中對列表cell屬性格式化設定主要通過colModel中formatter、formatoptions來設定 基本用法：

jQuery("#jqGrid_id").jqGrid({...   colModel: [      ...      {name:'price', index:'price',  formatter:'integer', formatoptions:{thousandsSeparator: ','}},      ...   ]...});

formatter主要是設定格式化類型(integer、email等以及函數來支援自訂類型),formatoptions用來設定對應formatter的參數，jqGrid中預定義了常見的格式及其options：

  integer thousandsSeparator： //千分位分隔字元, defaulValue number decimalSeparator, //小數分隔字元，如”.” thousandsSeparator, //千分位分隔字元，如”,” decimalPlaces, //小數保留位元 defaulValue currency decimalSeparator, //小數分隔字元，如”.” thousandsSeparator, //千分位分隔字元，如”,” decimalPlaces, //小數保留位元 defaulValue, prefix //首碼，如加上”$” suffix//尾碼 date srcformat, //source的本來格式 newformat //新格式 email 沒有參數，會在該cell是email加上： mailto:name@domain.com showlink baseLinkUrl, //在當前cell中加入link的url，如”jq/query.action” showAction, //在baseLinkUrl後加入&action=actionName addParam, //在baseLinkUrl後加入額外的參數，如”&name=aaaa” target, idName //預設會在baseLinkUrl後加入,如”.action?id=1″。改如果設定idName=”name”,那麼”.action?name=1″。其中取值為當前rowid checkbox disabled //true/false 預設為true此時的checkbox不能編輯，如當前cell的值是1、0會將1選中 select 設定下拉框，沒有參數，需要和colModel裡的editoptions配合使用 下面是一個使用的例子:

colModel:[    {name:'id',     index:'id',     formatter:  customFmatter},    {name:'name',   index:'name',   formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},    {name:'price',  index:'price',  formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},    {name:'email',  index:'email',  formatter: "email"},    {name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},    {name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},    {name:'type',   index:'type',   formatter: "select", editoptions:{value:"0:無效;1:正常;2:未知"}}]

其中customFmatter聲明如下：

function customFmatter(cellvalue, options, rowObject){    console.log(cellvalue);    console.log(options);    console.log(rowObject);    return "["+cellvalue+"]";};

在頁面顯示的效果如下：

  當然還得支援自訂formatter函數，只需要在formatter:customFmatter設定formatter函數，該函數有三個簽名：

function customFmatter(cellvalue, options, rowObject){   }//cellvalue - 當前cell的值//options - 該cell的options設定，包括{rowId, colModel,pos,gid}//rowObject - 當前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}

當然對於自訂formatter，在修改時需要擷取原來的值，這裡就提供了unformat函數，這裡見官網的例子：

jQuery("#grid_id").jqGrid({...   colModel: [      ...      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},      ...   ]...});   function imageFormat( cellvalue, options, rowObject ){    return '</pre><img src="'+cellvalue+'" alt="" /><pre>';}function imageUnFormat( cellvalue, options, cell){    return $('img', cell).attr('src');}

5 常見錯誤問題： chrome報錯：

Uncaught TypeError: Cannot read property ‘integer’ of undefined IE報錯：

SCRIPT5007: 無法擷取屬性“integer”的值: 對象為 null 或未定義
出現這樣的問題，是由於頁面沒有添加語言檔案的引用導致的
解決辦法為：添加語言檔案js

<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>