jqGrid简单示例
有时候后端有些数据需要进行展现，如果写html的td/tr什么的，比较费时费劲，而且通用性不强，下面就介绍一下jqgrid的使用，能够快速搭建一个表格，进行数据的展现和排序等基本操作。
jqgrid是jquery的表格插件，jqgrid可以从后台获取数据，数据格式支持json，xml，array等，jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。jqGrid是用ajax来实现对请求与响应的处理。jqgrid的效果如下：
更多demo参见：http://www.trirand.com/blog/jqgrid/jqgrid.html
jqgrid的安装
1.下载资源，因为jqgrid是基于jquery的，因此需要引入jquery的一些js文件
jqgrid下载：http://www.trirand.com/blog/?page_id=6，全部加载，直接download即可
jquery ui下载：http://download.jqueryui.com/download，选择最新版本即可
2.解压到一个目录，此时包含2个文件夹:jqgrid和jquery-ui，具体版本每次可能不太一样
3.部署到web服务器下，在http服务器下，新建一个目录mysite，里面创建2个文件夹css和js,然后拷贝文件：
将jqgrid/css/ui.jqgrid拷贝到mysite/css/ui.jqgrid
将jqgrid/js/的所有文件拷贝到mysite/js/下面
将jquery-ui/css/ui-lightness目录拷贝到mysite/css/ui-lightness
此时mysite的目录结构应该是：
+css
—-ui-lightness
—-ui.jqgrid.css
+js
—-i18n
—-jquery-1.9.0.min.js
—-jquery.jqGrid.min.js
—-jquery.jqGrid.src.js
至此基本环境算是搭建完成了，下面就可以创建jqgrid的第一个页面了。
jqgrid的helloword
创建一个页面mygrid.html，内容是：( 注意有些版本号，需要根据安装时的更改)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First jqGrid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
jQuery("#list2").jqGrid({
url:"http://hostname:9999/cgi-bin/data.pl",#后端的数据交互程序，改为你的
datatype: "json",//前后交互的格式是json数据
mtype: 'GET',//交互的方式是发送httpget请求
colNames:['id','col1','col2'],//表格的列名
colModel:[
{name:'id',index:'id', width:30},//每一列的具体信息，index是索引名，当需要排序时，会传这个参数给后端
{name:'col1',index:'col1', width:65,align:"right"},
{name:'col2',index:'col2', width:65,align:"right"}
],
rowNum:100,//每一页的行数
height: 'auto',
rowList:[100,200,300],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
jsonReader: {//读取后端json数据的格式
root: "rows",//保存详细记录的名称
total: "total",//总共有页
page: "page",//当前是哪一页
records: "records",//总共记录数
repeatitems: false
},
caption: "My jqgrid test"//表格名称
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
});
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
前后端数据交互的脚本data.pl如下：
#!/usr/bin/perl
use strict;
use warnings;
use JSON;
use CGI qw(:standard);
my %data = ();
my $count = 0;
print header('Content-Type: text/plain; charset=UTF-8');
while($count < 10){
my %row = ();
$row{id} = ++$count;
$row{col1} = 'col1'.$count;
$row{col2} = 'col2'.$count;
$data{'rows'}[$count-1] = {%row};
}
$data{'page'} = 1;
$data{'total'} = 1;
$data{'records'} = $count;
print to_json(\%data);
这时候访问的效果为：
有了jqgrid，展现数据就比较方便了。
示例代码:http://www.nklike.com/test/jqgrid/,to be continue