jqGrid之SubGrid

这些天一直在研究前台表格展示数据，之前的mutline也可以使用，但是在好奇心的驱使下，还是做了一些尝试！

首先看看做出来后的效果图

附上源码文件

subgrid.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
<title>jquery grid</title>   
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />    
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />    
  
  
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />    
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>    
<script src="js/jquery.layout.js" type="text/javascript"></script>    
<script src="js/grid.locale-en.js" type="text/javascript"></script>    
<script src="js/ui.multiselect.js" type="text/javascript"></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="subgrid.js" type="text/javascript"> </script>   
<script type="text/javascript">    
$(function(){   
jQuery("#list11").jqGrid({   
    url:'subgrid.xml',   
    datatype: "xml",   
    height: 200,   
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],   
    colModel:[   
        {name:'id',index:'id', width:55},   
        {name:'invdate',index:'invdate', width:90},   
        {name:'name',index:'name', width:100},   
        {name:'amount',index:'amount', width:80, align:"right"},   
        {name:'tax',index:'tax', width:80, align:"right"},         
        {name:'total',index:'total', width:80,align:"right"},          
        {name:'note',index:'note', width:150, sortable:false}          
    ],   
    rowNum:10,   
    rowList:[10,20,30],   
    pager: '#pager11',   
    sortname: 'id',   
    viewrecords: true,   
    sortorder: "desc",   
    multiselect: false,   
    subGrid : true,   
    subGridUrl: 'subgridchid.xml',   
    subGridModel: [{ name  : ['No','Item','Qty','Unit','Line Total'],    
                    width : [55,200,80,80,80] }    
    ],   
    caption: "Subgrid Example"  
       
});   
jQuery("#list11").jqGrid('navGrid','#pager11',{add:false,edit:false,del:false});   
});   
</script>    
</head>   
<body>   
    <table id="list11"></table>   
    <div id="pager11"></div>   
  
</body>   
</html>

Java代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>jquery grid</title>
 6 <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" /> 
 7 <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> 
 8 
 9 
10 <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" /> 
11 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
12 <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 
13 <script src="js/jquery.layout.js" type="text/javascript"></script> 
14 <script src="js/grid.locale-en.js" type="text/javascript"></script> 
15 <script src="js/ui.multiselect.js" type="text/javascript"></script> 
16 <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
17 <script src="js/jquery.tablednd.js" type="text/javascript"></script> 
18 <script src="js/jquery.contextmenu.js" type="text/javascript"></script> 
19 <script src="subgrid.js" type="text/javascript"> </script>
20 <script type="text/javascript"> 
21 $(function(){
22 jQuery("#list11").jqGrid({
23        url:'subgrid.xml',
24     datatype: "xml",
25     height: 200,
26        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
27        colModel:[
28            {name:'id',index:'id', width:55},
29            {name:'invdate',index:'invdate', width:90},
30            {name:'name',index:'name', width:100},
31            {name:'amount',index:'amount', width:80, align:"right"},
32            {name:'tax',index:'tax', width:80, align:"right"},        
33            {name:'total',index:'total', width:80,align:"right"},        
34            {name:'note',index:'note', width:150, sortable:false}        
35        ],
36        rowNum:10,
37        rowList:[10,20,30],
38        pager: '#pager11',
39        sortname: 'id',
40     viewrecords: true,
41     sortorder: "desc",
42     multiselect: false,
43     subGrid : true,
44     subGridUrl: 'subgridchid.xml',
45     subGridModel: [{ name  : ['No','Item','Qty','Unit','Line Total'], 
46                     width : [55,200,80,80,80] } 
47     ],
48     caption: "Subgrid Example"
49     
50 });
51 jQuery("#list11").jqGrid('navGrid','#pager11',{add:false,edit:false,del:false});
52 });
53 </script> 
54 </head>
55 <body>
56     <table id="list11"></table>
57     <div id="pager11"></div>
58 
59 </body>
60 </html>

XML文件：

1 subgrid.xml

 1 <?xml version="1.0" encoding="UTF-8"?>   
 2 <rows>   
 3     <page>1</page>   
 4     <total>1</total>   
 5     <records>1</records>   
 6     <row id='1'>   
 7         <cell>1</cell>   
 8         <cell>2</cell>   
 9         <cell>3</cell>   
10         <cell>4</cell>   
11         <cell>5</cell>   
12         <cell>6</cell>   
13         <cell>7</cell>   
14     </row>   
15     <row id='2'>   
16         <cell>2</cell>   
17         <cell>2</cell>   
18         <cell>3</cell>   
19         <cell>4</cell>   
20         <cell>5</cell>   
21         <cell>6</cell>   
22         <cell>7</cell>   
23     </row>   
24 </rows>   
25   
26 2 subgridchid.xml   
27   
28 <?xml version="1.0" encoding="UTF-8"?>   
29 <rows>   
30     <page>1</page>   
31     <total>1</total>   
32     <records>1</records>   
33     <row>   
34         <cell>5</cell>   
35         <cell>4</cell>   
36         <cell>3</cell>   
37         <cell>2</cell>   
38         <cell>1</cell>   
39     </row>   
40     <row>   
41         <cell>1</cell>   
42         <cell>2</cell>   
43         <cell>3</cell>   
44         <cell>4</cell>   
45         <cell>5</cell>   
46     </row>   
47 </rows>  
48 <?xml version="1.0" encoding="UTF-8"?>
49 <rows>
50     <page>1</page>
51     <total>1</total>
52     <records>1</records>
53     <row id='1'>
54         <cell>1</cell>
55         <cell>2</cell>
56         <cell>3</cell>
57         <cell>4</cell>
58         <cell>5</cell>
59         <cell>6</cell>
60         <cell>7</cell>
61     </row>
62     <row id='2'>
63         <cell>2</cell>
64         <cell>2</cell>
65         <cell>3</cell>
66         <cell>4</cell>
67         <cell>5</cell>
68         <cell>6</cell>
69         <cell>7</cell>
70     </row>
71 </rows>
72 
73 2 subgridchid.xml
74 
75 <?xml version="1.0" encoding="UTF-8"?>
76 <rows>
77     <page>1</page>
78     <total>1</total>
79     <records>1</records>
80     <row>
81         <cell>5</cell>
82         <cell>4</cell>
83         <cell>3</cell>
84         <cell>2</cell>
85         <cell>1</cell>
86     </row>
87     <row>
88         <cell>1</cell>
89         <cell>2</cell>
90         <cell>3</cell>
91         <cell>4</cell>
92         <cell>5</cell>
93     </row>
94 </rows>

Java代码

PS：需要的JS包，可以到jQuery grid 官网下载
心得：
1.效果很不错，但是每次查看子项目的时候，都需要查询后台的数据！
2.即使不查后台数据，在第一次查询的时候，需要将文件大批量的写到文件里面。
3.如果能查询一次，然后从缓存中读取是最好的！

posted @ 2012-12-14 11:18 Seaurl 阅读(2751) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

zhang wei 's BLOG

qq:1576410833 软件交流群:195724586 awbeci地址：http://www.awbeci.com/zhangwei

jqGrid之SubGrid

公告