jqGrid是一款非常强大的JavaScript插件，用于在Web页面中显示、自定义和编辑表格数据。它提供了许多功能，如分页，排序，模糊查询，多行编辑，复选框选择等，可以帮助您轻松地实现您的表格展示和操作。在本文中，我们将详细介绍如何使用jqGrid实现功能强大的表格展示和操作。

一、下载和使用jqGrid

首先，我们需要从jqGrid官方网站http://www.trirand.com/blog/下载最新版本的jqGrid插件。下载完成后，我们需要将其引入我们的Web页面中，通常需要引用以下几个文件：

```

```

其中，'ui.jqgrid.css' 和 'jquery-ui.css' 是jqGrid和jQuery UI的样式文件，可以根据需要进行修改。'jquery-1.10.0.min.js' 和 'jquery-ui-1.10.0/ui/jquery-ui.js' 是jQuery和jQuery UI的JavaScript文件。'grid.locale-cn.js'是jqGrid的本地化文件，'jquery.jqGrid.min.js' 是jqGrid插件的核心文件。将这些文件引用到页面中后，就可以开始使用jqGrid进行表格展示和操作了。

二、初始化jqGrid

在使用jqGrid之前，我们需要先对其进行初始化，这包括指定表格和分页控件的容器，定义表格的列模型和配置表格的一些属性等。以下是一个例子，演示在页面中初始化一个jqGrid：

```

$(function () {

$("#grid").jqGrid({

url: 'data.php',

datatype: 'json',

colNames: ['姓名', '性别', '出生日期', '电话', '邮箱'],

colModel: [

{name: 'name', index: 'name', width: 150},

{name: 'gender', index: 'gender', width: 80},

{name: 'birthday', index: 'birthday', width: 120},

{name: 'phone', index: 'phone', width: 150},

{name: 'email', index: 'email', width: 200}],

rowNum: 10,

rowList: [10, 20, 30],

pager: '#pager',

autowidth: true,

height: 'auto',

viewrecords: true,

caption: '用户信息表'

});

});

```

这个例子中，我们指定了一个名为'grid'的div作为表格和分页控件的容器，使用'data.php'提供的JSON数据作为表格的数据源，定义了表格的列模型，设置每页显示10条记录，使用'pager'指定分页控件的容器，自动调整表格的宽度和高度等。其他配置项可以在jqGrid官方网站查看。

三、配置分页控件

jqGrid内置了分页控件，通过分页控件，用户可以轻松地导航、过滤、排序和编辑表格中的数据。使用分页控件需要配置两个参数：'rowNum' 和 'rowList'。'rowNum' 指定每页显示的记录数，'rowList'则是一个整型数组，用于为用户提供可供选择的每页记录数选项。

例如，以下代码指定每页显示10条记录，并为用户提供可选的10，20和30条记录数选项：

```

rowNum: 10,

rowList: [10, 20, 30],

```

四、配置表格宽度和高度

在使用jqGrid之前，我们需要先确定表格的宽度和高度。有两种方式可以实现：一种是使用CSS设置固定的宽度和高度，另一种是根据表格的内容动态计算表格的宽度和高度。

如果使用CSS设置固定的宽度和高度，可以将容器的宽度和高度设置为固定值，然后在jqGrid中使用'width'和'height'参数指定表格的宽度和高度。例如，以下代码将表格宽度设置为500px，高度设置为300px:

```

#grid {

width: 500px;

height: 300px;

}

$(function () {

...

autowidth: false,

width: 500,

height: 300,

...

});

```

如果根据表格的内容动态计算宽度和高度，则需要使用'autowidth'和'autoheight'参数。'autowidth'可以让表格自适应其容器的宽度，'autoheight'则可以让表格的高度根据记录数自动调整。例如：

```

$(function () {

...

autowidth: true,

autoheight: true,

...

});

```

五、配置表格的列模型

在使用jqGrid展示表格数据之前，需要首先定义表格的列模型。列模型用于指定表格的列数、名称、类型、宽度、索引等信息。以下是一个例子：

```

colModel: [

{name:'name', index:'name', width:150},

{name:'gender', index:'gender', width:80},

{name:'birthday', index:'birthday', width:120},

{name:'phone', index:'phone', width:150},

{name:'email', index:'email', width:200}

],

```

其中，'name'指定列的名称，'index'指定列的索引，'width'指定列的宽度。如果要指定列的类型，可以使用'formatter'参数。通过使用列模型，我们可以灵活地控制表格的列数和布局。

六、配置表格的数据源

jqGrid支持多种数据源，包括JSON、XML、本地数据以及服务器数据。在配置数据源时，需要使用'datatype'参数指定数据格式，'url'参数指定数据源的URL地址。例如，以下代码指定使用JSON格式作为数据源，并使用'data.php'提供的数据：

```

datatype: 'json',

url: 'data.php',

```

如果使用本地数据，则需要将数据作为一个JavaScript对象传递给jqGrid的'data'参数。以下是一个示例：

```

datatype: 'local',

data: mydata,

```

其中，'mydata'是一个包含表格数据的数组。对于本地数据，jqGrid将对其进行排序、过滤等操作，每次访问后台时只需要重新加载数据即可。

七、通过jqGrid实现表格操作

除了展示表格数据外，jqGrid还提供了丰富的操作功能，如单元格编辑、多行选择、排序、搜索、服务器端分页等。以下是一些示例：

1. 单元格编辑

通过设置'editable'参数，可以启用单元格编辑功能。例如，以下代码启用单元格编辑功能，并使用'ajax'方式将数据保存到服务器：

```

colModel: [

{name:'name', index:'name', width:150, editable:true},

{name:'gender', index:'gender', width:80, editable:true},

{name:'birthday', index:'birthday', width:120, editable:true},

{name:'phone', index:'phone', width:150, editable:true},

{name:'email', index:'email', width:200, editable:true}

],

...

editurl: 'save.php',

```

2. 多行选择

通过设置'multiselect'参数，可以启用多行选择功能。例如，以下代码启用多行选择功能：

```

multiselect: true,

```

在使用多行选择功能时，需要获取选择的行数据。以下是一个示例：

```

var ids = $("#grid").jqGrid('getGridParam', 'selarrrow');

for(var i=0; i

var rowData = $("#grid").jqGrid('getRowData', ids[i]);

alert(rowData.name + " " + rowData.gender);

}

```

3. 排序和搜索

通过设置'sortable'参数，可以启用排序功能。例如，以下代码启用按照'name'字段进行排序的功能：

```

sortable: true,

sortname: 'name',

sortorder: 'asc',

```

同时，可以使用搜索功能，通过设置'search'参数，可以启用本地搜索功能。例如，以下代码启用按照'name'字段进行搜索的功能：

```

search: true,

searchrules: {name: {searchhidden: true}},

onSearch: function () {

var postData = $(this).jqGrid('getGridParam', 'postData');

postData["_search"] = true;

postData["searchField"] = "name";

postData["searchString"] = $("#name").val();

postData["searchOper"] = "cn";

}

```

4. 服务器端分页

对于大数据量的表格，可以使用服务器端分页功能。通过设置'datatype'参数为'json'，并设置'url'参数为服务端提供的数据URL，可以在后台进行分页操作。以下是一个示例：

```

datatype: 'json',

url: 'data.php',

mtype: 'POST',

loadonce: false,

jsonReader: {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: true,

id: "id"

},

prmNames: {

page: "page",

rows: "rows"

}

```

需要在服务端编写相应的接口，用于查询和分页操作。在jqGrid中，可以使用'page'和'rows'参数指定当前页面和每页显示的记录数，通过服务端返回的数据，更新表格的分页控件和数据展示。

八、总结

通过本文的介绍，我们了解了如何使用jqGrid实现功能强大的表格展示和操作。无论是展示静态数据，还是与服务器交互进行分页、排序、搜索等操作，都可以使用jqGrid轻松地完成。通过不断地学习和实践，我们可以进一步提升表格操作的效率和丰富性，为网站和应用增加更多的功能和价值。