公司之前都用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
想必有一定这样请求字符一看就明白,这儿就不多少说了。