第一個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,然後第二個要用超連結選項(如 編緝),之後才是真正的資料格,要用什麼語法呢? 感謝您。