|
|
Posted on 2010-10-28 00:41 penngo 閱讀(4287) 評論(3) 編輯 收藏 所屬分類: Java
剛好要用到jquery的表格插件，網上找到了Flexgrid和jqgrid兩個，經驗考慮后決定使用jqgrid,在這篇文章時，jqgrid的最新版本是3.8.1,官網還提供了封裝jqgrid的ASP.NET和PHP版本，可惜的是我要的java版本沒有，只能直接js調用，為了了解它的用法，寫了個簡單的例子。
jqgrid.jsp
1  <% @ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4<html>
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7<title>Insert title here</title>
8
9<link rel="stylesheet" type="text/css" href="js/jqueryui/1.8.4/css/ui-lightness/jquery-ui-1.8.4.custom.css" />
10<link rel="stylesheet" type="text/css" href="js/jqgrid/css/ui.jqgrid.css" />
11<script src="js/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
12<script src="js/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
13<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
14<script src="js/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
15<script type="text/javascript">
16  jQuery().ready(function (){
17jQuery("#list1").jqGrid({
18 url:'data.xml',
19 datatype: "xml",
20 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
21 colModel:[
22 {name:'id',index:'id', width:75},
23 {name:'invdate',index:'invdate', width:90},
24 {name:'name',index:'name', width:100},
25 {name:'amount',index:'amount', width:80, align:"right"},
26 {name:'tax',index:'tax', width:80, align:"right"},
27 {name:'total',index:'total', width:80,align:"right"},
28 {name:'note',index:'note', width:150, sortable:false}
29 ],
30 rowNum:10,
31 autowidth: true,
32 rowList:[10,20,30],
33 pager: jQuery('#pager1'),
34 sortname: 'id',
35 viewrecords: true,
36 sortorder: "desc",
37 caption:"XML Example"
38 });
39//注意：如果使用的是3.8.1版本時，會報No such method: navGrid，jquery.jqGrid.min.js里面缺少navGrid這個方法，換成3.8版本就行了，
40//jQuery("#list1").jqGrid('navGrid','#pager1',{add:false,edit:false,del:false});
41});
42</script>
43</head>
44<body>
45<table id="list1"></table>
46<div id="pager1"></div>
47</body>
48</html>
data.xml
1<?xml version="1.0" encoding="UTF-8"?>
2<rows>
3<page>1</page>
4<total>2</total>
5<records>5</records>
6
7<row id='1'>
8<cell>1</cell>
9<cell>in1</cell>
10<cell>aaab</cell>
11<cell>100rrrr</cell>
12<cell>12345</cell>
13<cell>222</cell>
14<cell>記得 </cell>
15</row>
16
17<row id='2'>
18<cell>2</cell>
19<cell>in1</cell>
20<cell>aaab</cell>
21<cell>100</cell>
22<cell>12345</cell>
23<cell>222</cell>
24<cell>記得 </cell>
25</row>
26<row id='3'>
27<cell>3</cell>
28<cell>in1</cell>
29<cell>aaab</cell>
30<cell>100</cell>
31<cell>12345</cell>
32<cell>222</cell>
33<cell>記得 </cell>
34</row>
35<row id='4'>
36<cell>4</cell>
37<cell>in1</cell>
38<cell>aaab</cell>
39<cell>100</cell>
40<cell>12345</cell>
41<cell>222</cell>
42<cell>記得 </cell>
43</row>
44<row id='5'>
45<cell>5</cell>
46<cell>in1</cell>
47<cell>aaab</cell>
48<cell>100</cell>
49<cell>12345</cell>
50<cell>222</cell>
51<cell>記得 </cell>
52</row>
53<row id='6'>
54<cell>6</cell>
55<cell>in1</cell>
56<cell>aaab</cell>
57<cell>100</cell>
58<cell>12345</cell>
59<cell>222</cell>
60<cell>記得 </cell>
61</row>
62<row id='7'>
63<cell>7</cell>
64<cell>in1</cell>
65<cell>aaab</cell>
66<cell>100</cell>
67<cell>12345</cell>
68<cell>222</cell>
69<cell>記得 </cell>
70</row>
71<row id='8'>
72<cell>8</cell>
73<cell>in1</cell>
74<cell>aab</cell>
75<cell>100</cell>
76<cell>12345</cell>
77<cell>222</cell>
78<cell>記得 </cell>
79</row>
80<row id='9'>
81<cell>9</cell>
82<cell>in1</cell>
83<cell>aaab</cell>
84<cell>100</cell>
85<cell>12345</cell>
86<cell>222</cell>
87<cell>記得 </cell>
88</row>
89</rows>
90
運行服務器，直接訪問jqgrid.jsp，應該能看到效果
評論
# re: jqgrid表格使用[未登錄] 回復 更多評論
2010-10-28 09:00 by
無圖無真相,上圖
# re: jqgrid表格使用 回復 更多評論
2010-10-28 14:47 by
@雪山飛鵠
哈哈，有興趣就試下，圖就懶得上了。遇上問題的話，可以一起討論學習下。
# re: jqgrid表格使用 回復 更多評論
2011-01-07 20:55 by
有沒有更進一步的例子了，如后臺用servlet
|