【轉】jqGrid學習之介紹

標籤：des   style   blog   http   color   io   os   使用   java   

JQGridJQGrid是一個在jquery基礎上做的一個表格控制項，以ajax的方式和伺服器端通訊。
JQGrid Demo 是一個線上的示範項目。在這裡，可以知道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",//覆蓋editUrljqModal: 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+"‘);\"  />  "; //se = "<input style=‘height:22px;width:40px;‘ type=‘button‘ value=‘儲存‘ onclick=\"$(‘#jqGridId‘).saveRow(‘"+cl+"‘);\"  />  ";se = "<input style=‘height:22px;width:40px;‘ type=‘button‘ value=‘儲存‘ onclick=\"customSaveRow(‘"+cl+"‘);\"  />  "; 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-upWhen TreeGrid is enabledWhen SubGrid is enabledWhen cellEdit is enabledWhen 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 functionWhen scroll is set to true or 1When 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

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

 

【轉】jqGrid學習之介紹