jquery之jquerygrid-subgrid

elan1986

浏览: 166945 次
性别:
来自: 北京

最近访客更多访客>>

L_Cool_J

topsaying

zhaolingzhu

hae

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery XML JSP HTML

这些天一直在研究前台表格展示数据，之前的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>

XML文件：

1 subgrid.xml

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<page>1</page>
	<total>1</total>
	<records>1</records>
	<row id='1'>
		<cell>1</cell>
		<cell>2</cell>
		<cell>3</cell>
		<cell>4</cell>
		<cell>5</cell>
		<cell>6</cell>
		<cell>7</cell>
	</row>
	<row id='2'>
		<cell>2</cell>
		<cell>2</cell>
		<cell>3</cell>
		<cell>4</cell>
		<cell>5</cell>
		<cell>6</cell>
		<cell>7</cell>
	</row>
</rows>

2 subgridchid.xml

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<page>1</page>
	<total>1</total>
	<records>1</records>
	<row>
		<cell>5</cell>
		<cell>4</cell>
		<cell>3</cell>
		<cell>2</cell>
		<cell>1</cell>
	</row>
	<row>
		<cell>1</cell>
		<cell>2</cell>
		<cell>3</cell>
		<cell>4</cell>
		<cell>5</cell>
	</row>
</rows>

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