这些天一直在研究前台表格展示数据，之前的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', 55}, {name:'invdate',index:'invdate', 90}, {name:'name',index:'name', 100}, {name:'amount',index:'amount', 80, align:"right"}, {name:'tax',index:'tax', 80, align:"right"}, {name:'total',index:'total', 80,align:"right"}, {name:'note',index:'note', 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', 55}, 29 {name:'invdate',index:'invdate', 90}, 30 {name:'name',index:'name', 100}, 31 {name:'amount',index:'amount', 80, align:"right"}, 32 {name:'tax',index:'tax', 80, align:"right"}, 33 {name:'total',index:'total', 80,align:"right"}, 34 {name:'note',index:'note', 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 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.如果能查询一次，然后从缓存中读取是最好的！