Jqgrid之强大的表格插件应用

jqGrid的主要特性

基于jquery UI主题，开发者可以根据客户需求更换不同的主题，使其界面更加美观。

兼容所有流行的web浏览器，确保在各种环境下都能稳定运行。

支持Ajax分页，有效控制每页显示的记录数，提升用户体验。

数据源支持XML、JSON以及数组形式，方便开发者进行数据处理。

提供丰富的选项配置及方法事件接口，满足各种个性化需求。

支持滚动加载数据，有效处理大量数据展示。

支持实时编辑保存数据内容，方便用户对数据进行修改。

支持多语言，方便不同语种的用户使用。

最重要的是，目前jqGrid是免费的，为开发者节省成本。

如何使用jqGrid

使用jqGrid的步骤如下：

1. 您需要从jqGrid的官网下载版本的程序包。

2. 在您的Web目录下，分别新建css和js文件夹，用于放置相关的css和js文件。

3. 创建一个index.html页面文件，并使用文本编辑器打开。在页面中引入必要的css和js文件。例如：

```html

```

4. 在body中加入的`

`和``分别用于加载数据列表和显示分页条。

```javascript

$("list").jqGrid({

caption: '手机产品列表',

url: 'server.php', // 数据来源地址

datatype: "json", // 数据格式设定为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"

});

```

```sql

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格式。我们需要连接到数据库：

```php

include_once ('connect.php');

```

从GET请求中，我们获取分页、排序和索引的信息：

```php

$page = $_GET['page'];

$limit = $_GET['rows'];

$sidx = $_GET['sidx'];

$sord = $_GET['sord'];

```

如果没有指定索引，我们将其设为1。然后，我们查询未被删除的产品数量：

```php

$result = mysql_query("SELECT COUNT() AS count FROM products where deleted=0");

$row = mysql_fetch_array($result, MYSQL_ASSOC);

$count = $row['count'];

```

如果有产品存在，我们计算总页数。然后，根据页面请求，生成相应的SQL查询语句，以获取对应的产品信息。之后，我们创建一个响应对象，将产品信息以及操作（如修改）以json格式输出。代码如下：

```php

if ($count > 0) {

$total_pages = ceil($count / $limit);

}

// ... 省略中间部分代码 ...

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的选项说明，并分享给大家。我还会从实际项目应用出发，举例讲解如何增加、删除、查看和查找数据等业务应用。通过调用`cambrian.render('body')`，我们可以渲染页面内容，使得数据展示更为生动和直观。