|
|
Posted on 2010-10-28 00:41 penngo 阅读(4285) 评论(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
|