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" });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;//连接数据库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 = "<a href='edit.php'>修改</a>"; $responce->rows[$i]['cell'] = array ( $row[sn], $row[title], $row[size], $row[os], $row[charge], $row[price], $opt ); $i++;}echo json_encode($responce);

至此，如果你往数据表中录入数据后，就可以在页面上显示数据表了，然后你可以排序、分页操作了。接下来我会将jqGrid的选项说明整理成文，分享给大家，然后从项目实际应用出发，举例讲解增加删除、查看、查找数据等业务的应用。