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代码 复制代码 收藏代码
  1. PS：需要的JS包，可以到jQuery grid 官网下载
    心得：
    1.效果很不错，但是每次查看子项目的时候，都需要查询后台的数据！
    2.即使不查后台数据，在第一次查询的时候，需要将文件大批量的写到文件里面。
    3.如果能查询一次，然后从缓存中读取是最好的！
posted @   Seaurl  阅读(2775)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae