jqgrid特性：
基于jquery ui主题，开发者可以根据客户要求更换不同的主题。
兼容目前所有流行的web浏览器。
ajax分页，可以控制每页显示的记录数。
支持xml，json，数组形式的数据源。
提供丰富的选项配置及方法事件接口。
支持表格排序，支持拖动列、隐藏列。
支持滚动加载数据。
支持实时编辑保存数据内容。
支持子表格及树形表格。
支持多语言。
最关键目前是免费的。
如何使用jqgrid
1、首先，您需要到jqgrid官网下载最新版本的程序包，您可以从这里下载：http://www.trirand.com/blog/
2、在web目录下分别新建css和js两个文件夹，放置相关的css和js文件，创建一个index.html页面文件，用你喜欢的文本编辑器打开，录入一下代码：
grid ...
3、在body中加入以下代码：
#list用来加载数据列表，#page用来显示分页条的。
4、调用jqgrid插件，在页面中加入如下js代码
$(#list).jqgrid({ caption: '手机产品列表', url:'server.php', datatype: json, colnames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(￥)','操作'], colmodel:[ {name:'sn',index:'sn', width:80,align:'center'}, {name:'title',index:'title', width:180}, {name:'size',index:'size', width:120}, {name:'os',index:'os', width:120}, {name:'charge',index:'charge', width:100,align:'center'}, {name:'price',index:'price', width:80,align:'center'}, {name:'opt',index:'opt', width:80, sortable:false, align:'center'} ], rownum:10, rowlist:[10,20,30], pager: '#pager', sortname: 'id', autowidth: true, height:280, viewrecords: true, multiselect: true, multiselectwidth: 25, sortable:true, sortorder: asc });
这个时候我们预览index.html发现表格外形已经呈现，就差数据填充了。如果此时你还看不到任何效果，请检查你的文件路径是否正确。
5、加载数据。
我们采用php读取mysql数据，返回json格式的数据给jqgrid来显示数据。我们准备一张数据表用来记录手机产品信息，结构如下：
create table if not exists `products` ( `id` int(11) not null auto_increment, `sn` varchar(10) not null, `title` varchar(60) not null, `size` varchar(30) not null, `os` varchar(50) not null, `charge` varchar(50) default null, `screen` varchar(50) default null, `design` varchar(50) default null, `price` int(10) not null, `addtime` datetime not null primary key (`id`) ) engine=myisam default charset=utf8;
接着，在server.php中读取数据，并输出json数据：
//连接数据库 include_once ('connect.php'); $page = $_get['page']; $limit = $_get['rows']; $sidx = $_get['sidx']; $sord = $_get['sord']; if (!$sidx) $sidx = 1; $result = mysql_query(select count(*) as count from products where deleted=0); $row = mysql_fetch_array($result, mysql_assoc); $count = $row['count']; if ($count > 0) { $total_pages = ceil($count / $limit); } else { $total_pages = 0; } if ($page > $total_pages) $page = $total_pages; $start = $limit * $page - $limit; $sql = select * from products where deleted=0 order by $sidx $sord limit $start , $limit; $result = mysql_query($sql) or die(couldn t execute query. . mysql_error()); $responce->page = $page; $responce->total = $total_pages; $responce->records = $count; $i = 0; while ($row = mysql_fetch_array($result, mysql_assoc)) { $responce->rows[$i]['id'] = $row[id]; $opt = 修改; $responce->rows[$i]['cell'] = array ( $row[sn], $row[title], $row[size], $row[os], $row[charge], $row[price], $opt ); $i++; } echo json_encode($responce);
至此，如果你往数据表中录入数据后，就可以在页面上显示数据表了，然后你可以排序、分页操作了。接下来我会将jqgrid的选项说明整理成文，分享给大家，然后从项目实际应用出发，举例讲解增加删除、查看、查找数据等业务的应用。