第一個jqGrid範例：Local array

2010/02/13 |

| 點擊數: 9 / 14096

jqGrid是一個jQuery的擴充外掛，透過它能很快速的撰寫資料Grid展示處理。目前正在評估是否將jqGrid整合到專案裡，因此這幾天做了一些測試，趁記憶猶新趕緊記錄下來。

首先由http://www.trirand.com/blog/?page_id=6下載jqGrid最新的示範壓縮檔jqgrid_demo36.zip，再將檔案解壓縮到測試用的Webapp裡。

jqGrid的資料區塊要存放在一個<table>裡，頁面導覽面板(Navigation Pager)則使用一個<div>，因此要顯示jqGrid的資料只要有下列兩組標籤，在執行jQuery("#grid_id").jqGrid()後，jqGrid就會自動設置這兩個標籤並填入資料：

<table id="grid_id"></table>
<div id="pager"></div>

jqGrid最基本的使用格式就是：

jQuery("#grid_id").jqGrid(options);

不同的設定選項就是透過options來處理。options的詳細說明要參考這裡的列表。

jqGrid能處理的資料類型有XML、JSON、陣列等，我們必須在options裡用datatype來指定要使用的是那一種資料，並提供對應的資料給jqGrid處理。在這個範例裡使用最簡單datatype="local"並提供陣列資料給jqGrid(程式取自上述範例資料夾裡的localex.html)。

options用colNames與colModel來定義資料欄位的描述與欄位設定，colNames指定欄位標題字串，而colModel則要分別設定每個欄位的定義，細節可以參考ColModel API。

範例程式如下(程式的顯示有些問題，請盡量使用文末的檔案連結來檢視)：

<html>
<head>
<link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.7.1.custom.css" media="screen" />
<link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="themes/ui.multiselect.css" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
  $.jgrid.no_legacy_api = true;
  $.jgrid.useJSON = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<table id="grid_id"><tbody></tbody></table>
</body>
</html>

<script>
  $(document).ready(function() {
    jQuery("#grid_id").jqGrid({
      datatype: "local",
      height: 250,
      colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
      colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
        {name:'note',index:'note', width:150, sortable:false}
      ],
      multiselect: true,
      caption: "Manipulating Array Data"
    });  // jqGrid

    var mydata = [
      {id:"1", invdate:"2007-10-01", name:"test", note:"note", amount:"200.00", tax:"10.00", total:"210.00"},
      {id:"2", invdate:"2007-10-02", name:"test2", note:"note2", amount:"300.00", tax:"20.00", total:"320.00"},
      {id:"3", invdate:"2007-09-01", name:"test3", note:"note3", amount:"400.00", tax:"30.00", total:"430.00"},
      {id:"4", invdate:"2007-10-04", name:"test", note:"note", amount:"200.00", tax:"10.00", total:"210.00"},
      {id:"5", invdate:"2007-10-05", name:"test2", note:"note2", amount:"300.00", tax:"20.00", total:"320.00"},
      {id:"6", invdate:"2007-09-06", name:"test3", note:"note3", amount:"400.00", tax:"30.00", total:"430.00"},
      {id:"7", invdate:"2007-10-04", name:"test", note:"note", amount:"200.00", tax:"10.00", total:"210.00"},
      {id:"8", invdate:"2007-10-03", name:"test2", note:"note2", amount:"300.00", tax:"20.00", total:"320.00"},
      {id:"9", invdate:"2007-09-01", name:"test3", note:"note3", amount:"400.00", tax:"30.00", total:"430.00"}
    ];

    for(var i=0;i< =mydata.length;i++)
      jQuery("#grid_id").jqGrid('addRowData',i+1,mydata[i]);
    });
</script>

執行後的網頁顯示如下：

jqGrid Array screen

範例檔案下載(請用右鍵另存目標)

範例1	Local array: my_localex.html
範例2	Local array 2: my_localex2.jsp
範例3	XML類型: my_xmlex.jsp XML字串類型: my_xmlstringex.jsp JSP含入檔: jq_inc.jspf 產生資料的程式範例：test1_xml.jsp
範例4	資料列處理程式: my_manipex.jsp