posts - 59, comments - 244, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

jqgrid表格使用

Posted on 2010-10-28 00:41 penngo 阅读(4150) 评论(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"> 
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,应该能看到效果

评论

# re: jqgrid表格使用[未登录]  回复  更多评论   

2010-10-28 09:00 by 雪山飞鹄
无图无真相,上图

# re: jqgrid表格使用  回复  更多评论   

2010-10-28 14:47 by pengo
@雪山飞鹄
哈哈,有兴趣就试下,图就懒得上了。遇上问题的话,可以一起讨论学习下。

# re: jqgrid表格使用  回复  更多评论   

2011-01-07 20:55 by
有没有更进一步的例子了,如后台用servlet

只有注册用户登录后才能发表评论。


网站导航: