js表格控件 jsp使用 jqgrid3.5 配置最简单的列子,下载

最新推荐文章于 2016-12-28 17:16:00 发布

最新推荐文章于 2016-12-28 17:16:00 发布 · 232 阅读

文章标签：

#JSP #jQuery #CSS #JavaScript #json #ViewUI

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种用于网页的表格插件jqGrid，并给出了一个简单的使用示例。该插件支持多种浏览器，具备丰富的功能，如排序、分页等。

公司之前都用yahoo-table控件，但因为他它是配置复杂，决定换个表格控件，要求可以换样式，刚开始我选用了基于jquery的一个控件--flexigrid,使用起来还是很方便，样式也比较美观，但是在ie8上会有bug，虽然现在我已经改他原代码已经没有问题，毕竟他有一年多没有更新，资料在网上也不多，所有决定不用这个控件。之后我找到了jqgrid。

jqgrid 在样式上也是比较美观的，支持各种浏览器，更新的版本也比较多，现在最新的版本是3.6，功能是越来越多，排序，分页，查找，==，更多功能可以查看:http://www.trirand.com/jqgrid/jqgrid.html。官方资料和例子都比较多，网上共享的列子也很多，遗憾的是都是英文的或是php的，要么就是3.5版之前的，jqgrid在3.5以后会jquery ui，支持自定义样式，官方的美观的dome就是使用了jquery ui库，网上下载的说是3.5的例子，一个个都不完整，对于初学者难以入门，今天我就写个最简单例子共享给大家，希望对大家有帮助。

首先使用jqgrid需要导入js和css,所需的我文件我上传了，可以下载，包括中文汉化，网上找不到，自己汉化的，有什么不足望大家提出宝贵意见。

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-CN_zh.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<body>
  <table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
  <div id="pager2" class="scroll" style="text-align:center;"></div>
 </body>

$("#list2").jqGrid({
			   	url:'ajax.txt',
				datatype: "json",mtype:"POST",
			   	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 asc, invdate', 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: $('#pager2'),
			   	sortname: 'id',
			    viewrecords: true,
			    sortorder: "desc",
			    caption:"JSON Example"
			}).navGrid('#pager2',{edit:false,add:false,del:false});
		});

ajax.txt内容，在实际运用中是从数据库查数据，自己拼成json字符串返回

{"page":"1","total":2,"records":"13",
"rows":[
{id:"12345",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"23456",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"34567",cell:["dd","dd","dd","dd","dd","dd","dd"]},
{id:"45678",cell:["dd","dd","dd","dd","dd","dd","dd"]}
]
}

url可以换成自己要请求的路径，queryString为：nd=1259595461093&_search=false&rows=10&page=1&sidx=id&sord=desc

想必有一定这样请求字符一看就明白，这儿就不多少说了。