公司之前都用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
想必有一定这样请求字符一看就明白，这儿就不多少说了。
分享到：
相关推荐
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically ...
jqgrid 3.5 beta demo 呵呵，jqgrid推出的3.5 beta demo版本
jQGrid 3.5 jQuery UI 1.7.2 Lightness theme (get more here) Sample static JSON file Sample static XML file (do not put this one into the 'url', it won't work) Complete JSON.php and XML.php parser mySQL...
好用的jquery表格插件jqGrid。 本压缩包含源码和DEMO，还有一个3.4的DOC。
jQuery jqGrid 3.5 完整实例包.zip
jqgrid 3.5 beta (buld3) support jquery 1.3.2 incluide ui.jqgrid.css
貌似官方网站下不了，从国外网站上弄的..
内容索引:脚本资源,jQuery,jqGrid jqGrid是一个jQuery Grid插件，是客户端加载数据解决方案，有着优秀的界面和提供了良好的文档，它可以使用任何服务器端语言，ASP、PHP、、JSP等等。它的一个好用的功能是提供灵活...
新功能包括tree grid(树表)...等等.... 参考DEMO ：http://www.trirand.com/jqgrid/jqgrid.html 在demo连接的网页右侧可以找到包含tree grid的各种例子...
jqGrid是一个jQuery Grid插件，是客户端加载数据解决方案，有着优秀的界面和提供了良好的文档，它可以使用任何服务器端语言，比如：ASP,PHP,ASP.net
table表格样式利用jqgrid实现
Struts2 和 hibernate 演示 jqGrid, 使用Action中的 代码可以容易的把jqGrid 用于servlet或纯jsp. Struts 2.16, jqGrid 3.5b, hibernate 3.2 annotation 由于我的上传权限为20M,而我上传上的包括所有的源代码和支持...
jqGrid实现如何自定义组合控件，实现更好用户体验
TO 那些不能访问官方网站的朋友, 这是目前最新版到2009/04/02刚释出
jQuery 学习之：jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid...
<script type="text/javascript" src="js/jquery.jqGrid.min.js"> <script type="text/javascript" src="js/jquery.tablednd.js"> <script type="text/javascript" src="js/jquery.contextmenu.js"> ...
jqgrid表格，单元格合并，并显示，demo版本
jqGrid是一个非常好用的免费开源Grid组件，功能强大，适用于各种表格操作，数据管理。作为jquery插件，jqGrid使用方便，简介，美观。
NULL 博文链接：https://vipshow.iteye.com/blog/1812381