第一個jqGrid範例：Local array
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>
執行後的網頁顯示如下：
範例檔案下載(請用右鍵另存目標)
| 範例1 | Local array: my_localex.html |
| 範例2 | Local array 2: my_localex2.jsp |
| 範例3 |
|
| 範例4 | 資料列處理程式: my_manipex.jsp |
##
您可能也會有興趣的類似文章
- 第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)
- 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
- 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
- [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
- jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
- jQuery選擇器測試與範例 (0則留言, 2007/09/29)
- [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
- FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
- jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
- 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
- 使用jQuery的效益 (0則留言, 2007/09/23)
- 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
- jQuery在Xuite的測試 (0則留言, 2007/10/01)
- 使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
- 方便查閱的jQuery 1.2 Cheat Sheet (1則留言, 2007/09/25)
請問如果每row最前面是click，然後第二個要用超連結選項(如 編緝)，之後才是真正的資料格，要用什麼語法呢？ 感謝您。