Jqgrid入門-顯示基本的表格(一)

 首先對Jqgrid網格插件作個簡要的說明。在衆多的表格插件中，Jqgrid的特色是很是鮮明的。

        特色以下:

• 完整的表格呈現與運算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
• 自定義的工具列。
• 預設的Navigator工具列，能夠很容易的使用新增、刪除、編輯、檢視及搜尋等功能。
• 完整的分頁功能。
• 按下任一欄位的標頭，皆能夠該欄位爲排序項目。不管是升序或降序皆可。
• 預設的action formatter，能夠快速而直覺地對每筆資料作運算。
• 支持多種數據格式。好比json、xml、array等。

       這是我本身作的DEMO， 先上個圖片，當你們看看吧。

  

 

 

 

 

 

 

 

 

         其實要實現上面圖中的效果也不難。跟着個人步驟一步一步實現它吧！

        （1）HTML部分        

        想要順利的使用Jqgrid，須要引用下面6個文件。分別是：

• jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）
• ui.jqgrid.custom.css（專用於jqGrid界面的CSS文件）
• jquery-1.7.2.js（jQuery的核心）
• jquery-ui-1.8.1.custom.min.js（用於支持jQuery UI界面）
• grid.locale-zh-CN.js（針對jqGrid的locale設置，根據locale不一樣，選擇不一樣的尾綴）
• jquery.jqGrid.min.js（jqGrid的核心，能夠到jqGrid網站，根據需求選擇模塊下載）

        而後在html的body裏面建立一個table和div並賦予id屬性就好了。如圖，很是簡潔。

1 2 3 4 5 6

<link href= "<%=basePath%>main/css/ui.jqgrid.css" rel= "stylesheet" type= "text/css" /> <link href= "<%=basePath%>main/css/jquery-ui-1.8.1.custom.css" rel= "stylesheet" type= "text/css" /> <script type= "text/javascript" src= "<%=basePath%>main/js/jquery-1.7.2.js" ></script> <script type= "text/javascript" src= "<%=basePath%>main/js/grid.locale-zh_CN.js" ></script> <script type= "text/javascript" src= "<%=basePath%>main/js/jquery.jqGrid.min.js" ></script> <script type= "text/javascript" src= "<%=basePath%>main/js/grid.custom.js" ></script>

         （2）JS部分

        官方文檔說實現一個要想生成一個 Jqgrid ，最直接的方法就是：

        $(「#grid_id」).jqGrid(options);也就是獲得一個table的jquery對象，而後傳遞options就能夠獲得一個Jqgrid對象。

        簡單的介紹下options中最重要的部分。

 

         1. jqGrid的重要選項

具體的options參考，能夠訪問Jqgrid文檔關於option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較經常使用的，重點介紹一下：

• url：提交處理數據的地址。
• 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：定義頁碼控制條PageBar
• sortname：指定默認的排序列，能夠是列名也能夠是數字。此參數會在被傳遞到服務端。
• viewrecords：設置是否在PagerBar顯示全部記錄的總數。
• caption：Grid的標題。若是設置了，則將顯示在Grid的Header層 ；若是未設置，則標題區域不顯示 。
• rowNum：用於設置Grid中一次顯示的行數，默認值爲20。
• rowList：一個數組，用於設置Grid能夠接受的rowNum值。例如[10,20,30]。
• prmNames：這是一個數組，用於設置jqGrid將要向服務端傳遞的參數名稱。咱們通常不用去改變什麼。
• colModel：最重要的數組之一，用於設定各列的參數。（稍後詳述）
• jsonReader：這又是一個數組，用來設定如何解析從Server端發回來的json數據。（稍後詳述）

         2. colModel的重要選項

 

        和Jqgrid同樣colModel也有許多很是重要的選項，在使用搜索、排序等方面都會用到。這裏先只說說最基本的。

• name：爲Grid中的每一個列設置惟一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
• index：設置排序時所使用的索引名稱，這個index名稱會做爲sidx參數傳遞到服務端。
• label：表格顯示的列名。
• width：設置列的寬度，目前只能接受以px爲單位的數值，默認爲150。
• sortable：設置該列是否能夠排序，默認爲true。
• search：設置該列是否能夠被列爲搜索條件，默認爲true。
• resizable：設置列是否能夠變動尺寸，默認爲true。
• hidden：設置此列初始化時是否爲隱藏狀態，默認爲false。
• formatter：預設類型或用來格式化該列的自定義函數名。經常使用預設格式有：integer、date、currency、number等（具體參見文檔）。

        3. jsonReader選項

 

        jsonReader是Jqgrid的一個重要選項，用於設置如何解析從服務端發回來的json數據。其默認值爲：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

jsonReader : { root : "rows" , // 實際模型的人口 page : "page" , // 當前頁碼 total : total, // 當前共多少頁 records : "records" , // 總共多少行數據 repeatitems : true , cell : "cell" , id : "id" , userdata : "userdata" , // 數據 subgrid : { root : "rows" , repeatitems : true , cell : "cell" } }

       咱們能夠這樣理解，prmNames設置瞭如何將Grid所須要的參數傳給服務端，而jsonReader設置瞭如何去解析從服務端傳回來的json數據。若是沒有設置jsonReader的話，Jqgrid將會根據默認的設置來解析json數據，並顯示在表格裏。通常狀況下，咱們修改jsonReader的root爲服務端傳遞過來的數組就能夠知足要求了。好比：

1 2 3 4 5 6

jsonReader : { root : "dataList" , // 服務端保存數據的集合 records : "record" , // 能夠不要,由於個人服務端是record,不是默認的,才加上的 repeatitems : false // 其它的所有默認就行 }

由此，Jqgrid完成一個request，並將獲得的response，解析爲所需的數據，顯示到Grid表格中。整個流程就走完了。

原創文章，轉載請註明： 轉載自java開發者

本文連接地址: Jqgrid入門-顯示基本的表格(一)