jqGrid使用整理

時間  2019-11-17
標籤 jqgrid 使用 整理 简体版
原文   原文鏈接

jqGrid使用整理

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

 

一、引入到項目中來php

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

 

Js代碼   收藏代碼
  1. <link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/ui.jqgrid.css" />   
  2. <script type="text/javascript" src="$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script>   
  3. <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。以下：html

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

 

二、在頁面中使用前端

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

Js代碼   收藏代碼
  1. <table id="jqGridId"></table> //這個是必須的   
  2. <div id="pager"></div> //這個是顯示分頁bar的信息，根據須要  

而後在js中jquery

Js代碼   收藏代碼
  1. $("#jqGridId").jqGrid({options})  

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

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

 

 三、參數(options)ajax

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

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

Js代碼   收藏代碼
  1. $("#jqGridId").jqGrid({   
  2.     url: s2web.appURL + "jq/queryWare.action",   
  3.     datatype:"local", //爲local時初始化不加載，支持json，xml等   
  4.     mtype: "POST",   
  5.     colNames:['編號', '做者', 'ISBN','重量','描述'], //表頭   
  6.     colModel:[ //這裏會根據index去解析jsonReader中root對象的屬性，填充cell   
  7.         {name:'id', index:'id', width:55, align:"center",sortable:false},  
  8.         {name:'author', index:'author', width:100, sortable:false},   
  9.         {name:'isbn', index:'isbn', width:120,align:"right", sortable:false},   
  10.         {name:'weight', index:'weight', width:80,align:"center", sortable:false},   
  11.         {name:'wareDesc', index:'wareDesc', width:400, sortable:false}   
  12.     ],   
  13.     width: 'auto', //數字 & 'auto','100%'   
  14.     height: 200,   
  15.     rowNum: 5, //每頁記錄數   
  16.     rowList:[5, 10,20,30], //每頁記錄數可選列表   
  17.     pager: '#pager2', //分頁標籤divID   
  18.     viewrecords: true, //顯示記錄數信息，若是這裏設置爲false,下面的不會顯示 recordtext: "第{0}到{1}條, 共{2}條記錄", //默認顯示爲{0}-{1} 共{2}條 scroll: false, //滾動翻頁，設置爲true時翻頁欄將不顯示  
  19.     /**這裏是排序的默認設置，這些值會根據列表header點擊排序時覆蓋*/ sortable: false,   
  20.     sortname: "warename",   
  21.     sortorder: "desc",   
  22.   
  23.     caption:"商品列表", //顯示查詢結果表格標題   
  24.     rownumbers: true, //設置列表顯示序號,須要注意在colModel中不能使用rn做爲index   
  25.     rownumWidth: 20, //設置顯示序號的寬度，默認爲25   
  26.     multiselect: true, //多選框   
  27.     multiboxonly: true, //在點擊表格row時只支持單選，只有當點擊checkbox時纔多選，須要multiselect=true是有效   
  28.     prmNames : { //如當前查詢實體爲ware，這些能夠在查詢對象的superObject中設定   
  29.         page: "wareDetail.page",   
  30.         rows: "wareDetail.rows",   
  31.         sort: "wareDetail.sidx",   
  32.         order: "wareDetail.sord",   
  33.         search: "wareDetail.search"   
  34.     },   
  35.     jsonReader:{ //server返回Json解析設定   
  36.         root: "list", //對於json中數據列表   
  37.         page: "page",   
  38.         total: "totalPage",   
  39.         records: "totalCount",  
  40.         repeatitems: false,   
  41.     }   
  42. });   
  43.   
  44. $("#jqGridId").jqGrid('navGrid','#pager2'{edit:false,add:false,del:false,search:false});//這裏設定分頁bar顯示的信息  

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

 

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

Java代碼   收藏代碼
  1. public class JqGridQueryBase implements Serializable {  
  2.   
  3.     private static final long serialVersionUID = -2849625318773684220L;  
  4.   
  5.     /** 當前頁面 */  
  6.     private int               page;  
  7.     /** 每頁的記錄數 */  
  8.     private int               rows;  
  9.     /** 查詢字段值 */  
  10.     private String            search;  
  11.     /** 排序字段和排序方式如：username/asc */  
  12.     private String            sidx;  
  13.     private String            sord;  
  14.   
  15.     /** 分頁信息:總記錄數 */  
  16.     private int               totalCount;  

 

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

Java代碼   收藏代碼
  1. public class PageModule<T> extends JqGridQueryBase {  
  2.   
  3.     private static final long serialVersionUID = -663611670315885315L;  
  4.     /** 查詢返回結果數據 */  
  5.     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

好比對價格須要加前綴和分割能夠以下設定：

Js代碼   收藏代碼
  1. {name:'price',index:'price', width:80,align:"right", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},  

支持下拉select的設定：

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

顯示連接：

Js代碼   收藏代碼
  1. {name:'warename', index:'warename', width:300,sortable:false, formatter:'showlink', formatoptions:{baseLinkUrl:'query.action', addParam: '&action=edit'}},  

 

 

 

四、經常使用方法(methods)

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

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

Java代碼   收藏代碼
  1. jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );   
  2. jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );  

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

Js代碼   收藏代碼
  1. jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");  

 

 

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

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

二、清空grid

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid("clearGridData");    

三、返回當前grid序號

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid('getDataIDs');  

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

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);  

五、設置某row值

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid('setRowData', rowIds[i], {});  
 一個例子：須要對grid中的數據進行循環遍歷獲取、設置、更改
Js代碼   收藏代碼
  1. var rowIds = $("#jqGrid_id").jqGrid('getDataIDs');   
  2. if(rowIds){   
  3.     for(var i = 0, j = rowIds.length; i < j; i++) {   
  4.         var curRowData = $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);   
  5.         //curRowData = {"name1":"value1","name2":"value2","name3":"value3"...}   
  6.         if(curRowData['name1'] == ""){  
  7.             //dosomething   
  8.         }   
  9.         //更改:更改name1的值   
  10.         $.extend(curRowData, {"name1":"newValue1"})   
  11.         $("#jqGrid_id").jqGrid('setRowData', rowIds[i], curRowData);   
  12.     }   
  13. }  

六、獲取grid參數.

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

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid('getGridParam','name');   

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

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid('setGridParam', 'name');  

以下常見須要獲取的參數：

Js代碼   收藏代碼
  1. #獲取總記錄數  
  2. $("#jqGrid_id").jqGrid('getGridParam','records');  
  3. #獲取請求參數  
  4. $("#jqGrid_id").jqGrid('getGridParam','postData');  
  5. #獲取選中的row，返回string  
  6. $("#jqGrid_id").jqGrid("getGridParam","selrow");  
  7. #獲取選中的多個row，返回Array  
  8. $("#jqGrid_id").jqGrid("getGridParam","selarrrow");  

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

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

同時，在實際的使用場景中，咱們多是須要選擇經過選擇表單的值再進行查詢：

Js代碼   收藏代碼
  1. $("#queryBtn").bind("click", function() {   
  2.     var sdata = {   
  3.         "ware.warename" : $("#warenameId").val(),   
  4.         "ware.number" : $("#numberId").val(),   
  5.         "ware.valid" : $("#validId").val()   
  6.     };   
  7.     var postData = $("#jqGridId").jqGrid("getGridParam", "postData");   
  8.     $.extend(postData, sdata);   
  9.     $("#jqGridId").jqGrid("setGridParam", {search: true}).trigger("reloadGrid", [{page:1}]);   
  10. });  

八、刪除

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid("delRowData", rowid); //前臺刪除  

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

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

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

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

上述API是前端刪除，對於先後臺交互的刪除的API：

Js代碼   收藏代碼
  1. $("#jqGrid_id").jqGrid("delGridRow", rowid);  

 下面是一個刪除的例子：

Js代碼   收藏代碼
  1. $("#removeBtn").bind("click", function(){  
  2.     var gr = $("#jqGridId").jqGrid('getGridParam','selrow');  
  3.     if(gr){  
  4.         var rowData = $("#jqGridId").jqGrid("getRowData", gr);  
  5.         $("#jqGridId").jqGrid('delGridRow', gr ,{  
  6.             top: 100,  
  7.             left: 400,  
  8.             reloadAfterSubmit:false,  
  9.             modal: true,                            //模態窗口  
  10.             url: s2web.appURL + "jq/del.action",    //覆蓋editUrl  
  11.             jqModal: true,  
  12.             beforeSubmit: function(postData, formid){// id=value1,value2,...  
  13.                 var editData = {  
  14.                         "ware.id": rowData.id  
  15.                 };  
  16.                 postData = $.extend(postData, editData);    
  17.                 console.log(postData);  
  18.                 return[true,"success"];   
  19.             },  
  20.             afterSubmit: function(xhr, postData){   //返回[success, message, new_id]  
  21.                 console.log(postData);   
  22.                 if(xhr.responseText == "\"1\""){  
  23.                     //alert("保存成功");  
  24.                     return [true,"保存成功",postData.id];  //message is ignored if success is true  
  25.                 }  
  26.                 return [false,"保存失敗",postData.id];  
  27.             }  
  28.         });  
  29.     }else{  
  30.         alert("請選擇要刪除的數據");  
  31.     }  
  32. });  

 

 五、事件(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  
一、beforeRequest 
二、loadBeforeSend 
三、serializeGridData 
四、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.) 
五、beforeProcessing 
六、gridComplete 
七、loadComplete

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

Js代碼   收藏代碼
  1.    //設置multiselect checkbox's value,設置總的稱重和件數  
  2.    gridComplete: function(){  
  3.     var rowIds = $("#wmsjQContentTableId").jqGrid('getDataIDs');  
  4.     var totalWeight = 0,totalNumber = 0;  
  5.           for(var i = 0, j = rowIds.length; i < j; i++) {  
  6.              var curRowData = $("#wmsjQContentTableId").jqGrid('getRowData', rowIds[i]);  
  7.              var curChk = $("#"+rowIds[i]+"").find(":checkbox");  
  8.              curChk.attr('name', 'wmsCheckboxname');  
  9.              curChk.attr('value', curRowData['outStockCode']);   
  10.              if(curRowData['weight'] != ""){  
  11.                totalWeight += parseFloat(curRowData['weight']);  
  12.              }  
  13.              if(curRowData['number'] != ""){  
  14.                totalNumber += parseFloat(curRowData['number']);  
  15.              }  
  16.           }  
  17.         $("#totalWeighId").val(totalWeight);  
  18.         $("#totalPackNumId").val(totalNumber);  
  19. },  
  20.   
  21. //行選中時更新稱重、件數、出庫單  
  22. onSelectRow: function(ids){  
  23.     var rowData = $("#wmsjQContentTableId").jqGrid("getRowData", ids);  
  24.     $("#curWeighId").val(rowData['weight']);  
  25.     $("#packNumId").val(rowData['number']);  
  26.     $("#curWmsOutStockCodeId").val(rowData['outStockCode']);  
  27. }  

考慮以下一種場景，在列表的最後一列通常會有要求操做欄，提供刪除、修改等操做，那麼一樣也能夠經過gridComplete事件來實現：

Java代碼   收藏代碼
  1. colNames:['商品編號', '商品名稱', '單價','採購日期','庫存','狀態','操做'],//表頭  
  2. 在colModel中有一列空值佔位，注意index不要和json中重複  
  3. {name:'act',        index:'act',        width:150}    

 在gridComplete事件中：

Js代碼   收藏代碼
  1.    gridComplete: function(){  
  2.     var ids = $("#jqGridId").jqGrid('getDataIDs');  
  3.     for(var i=0, j=ids.length; i < j; i++){  
  4.         var cl = ids[i];  
  5.         be = "<input style='height:22px;width:40px;' type='button' value='編輯' onclick=\"$('#jqGridId').editRow('"+cl+"');\"  />&nbsp;&nbsp;";   
  6.         //se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"$('#jqGridId').saveRow('"+cl+"');\"  />&nbsp;&nbsp;";  
  7.         se = "<input style='height:22px;width:40px;' type='button' value='保存' onclick=\"customSaveRow('"+cl+"');\"  />&nbsp;&nbsp;";   
  8.         ce = "<input style='height:22px;width:40px;' type='button' value='取消' onclick=\"$('#jqGridId').restoreRow('"+cl+"');\" />";   
  9.         $("#jqGridId").jqGrid('setRowData',ids[i], {act: be + se + ce});  
  10.     }     
  11. },  

 

六、其餘

凍結行、列

 

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

須要設置兩處：

 

Js代碼   收藏代碼
  1. colModel中的frozen:true  
  2. $("#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() {

Js代碼   收藏代碼
  1. $("#jqGridId").jqGrid('destroyFrozenColumns')  
  2. .jqGrid('setColProp','id', {frozen:true})  
  3. .jqGrid('setColProp','name', {frozen:true})  
  4. .jqGrid('setFrozenColumns')  
  5. .trigger('reloadGrid', [{current:true}]);  
  6. );   

 

 

 

 

 

七、參考如下文章

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程