jqgrid表格使用

刚好要用到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" >  
16jQuery().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，应该能看到效果