Jqgrid强大的表单插件应用

JqGrid是一个基于jQuery的强大表单插件。使用jqGrid可以轻松实现前端页面和后台数据之间的ajax异步通信。jqGrid运行速度非常快，可以很好地应用在一些后台管理系统中管理大量数据。

JqGrid特性：

基于jquery UI主题，开发者可以根据客户需求改变不同的主题。兼容目前所有流行的网络浏览器。Ajax分页可以控制每页显示的记录数量。支持XML、JSON和数组数据源。提供丰富的选项配置和方法事件接口。支持表格排序、拖动列和隐藏列。支持滚动加载数据。支持实时编辑和保存数据内容。支持子表和树表。支持多种语言。钥匙目前免费。

如何使用jqGrid？

1.首先，您需要从jqGrid官网下载最新版本的软件包。您可以从这里下载：http://www.trirand.com/blog/2,在web目录下创建两个新的css和js文件夹，放置相关的css和js文件，创建一个index.html页面文件，用您最喜欢的文本编辑器打开它，并输入代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/TItle grid/TItle link rel='样式表' type=' text/CSS ' href=' CSS/ui-lighting/jquery-ui-1 . 8 . 2 . custom . CSS '/link rel='样式表' type=' text/CSS ' href=' CSS/ui . jqgrid . CSS '/script src=' http : js/jquery . js ' type=' text/JavaScript '/script src=' http 333./body/html3，向正文中添加以下代码：

table id=' list '/table div id=' pager '/div # list用于加载数据列表，#page用于显示分页栏。

4.调用jqGrid插件，并将以下js代码添加到页面中。

$ ('# list ')。jqgrid ({caption : '手机产品列表'，URL 3360' server.php '，datatype :' JSON '，colnames 3360 ['number '，' name '，'主屏幕大小'，'操作系统'，'电池。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 '此时，我们预览了index.html，发现表格形状已经呈现，但数据只是填充。如果此时看不到任何效果，请检查您的文件路径是否正确。

5.加载数据。

我们使用php读取mysql数据，并将json格式的数据返回给jqGrid来显示数据。我们准备了一个数据表来记录手机产品的信息，结构如下：

如果不存在则创建表` 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，` char ' varchar(50)DEFAULT NULL，` design ' varchar(50)DEFAULT NULL，` price ' int(10)NOT NULL，` addtime` datetime NOT NULL主键(` id `))ENGINE=0然后，读取server.php中的数据并输出json数据：

//连接数据库include _ once(' connect。PHP’)；$ page=$ _ GET[' page ']；$ limit=$ _ GET[' row ']；$ sidx=$ _ GET[' sidx ']；$ sord=$ _ GET[' sord ']；if(！$ sidx)$ sidx=1；$ result=MySQL _ query(' SELECT COUNT(*)AS COUNT FROM products，其中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)或' die('无法执行查询。MySQL _ error())；$ response-page=$ page；$ response-total=$ total _ pages；$ response-records=$ count；$ I=0；while($ row=MySQL _ fetch _ array($ result，MYSQL _ ASSOC)){ $ responce-row[$ I][' id ']=$ row[id]；$opt='a href='edit.php '修改/a '；$ response-row[$ I][' cell ']=array($ row[sn]，$row[title]，$row[size]，$row[os]，$row[charge]，$row[price]，$ opt)；$ I；} echo JSON _ encode($ responce)；至此，如果你往数据表中录入数据后，就可以在页面上显示数据表了，然后你可以排序、分页操作了。接下来我会将jqGrid的选项说明整理成文，分享给大家，然后从项目实际应用出发，举例讲解增加删除、查看、查找数据等业务的应用。