jQuery学习：jqGrid实现分页与搜索功能详解

"jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）" 本文主要探讨了如何在jQuery开发中使用jqGrid插件来实现数据的分页和搜索功能。jqGrid是一款强大的jQuery插件，它允许开发者方便地展示和操作网格数据，并通过AJAX实现前后端异步通信。 首先，为了使用jqGrid，你需要在HTML页面中引入必要的CSS和JavaScript文件。这包括`ui.jqgrid.css`用于样式设置，`jquery-2.0.3.min.js`作为jQuery库，`jquery.jqGrid.min.js`是jqGrid的核心文件，以及`grid.locale-en.js`用于设置本地化语言环境。 接下来，我们来看一下使用jqGrid的关键点： 1. 获取值： - 获取单个选中行的id：可以通过`getGridParam`方法获取，但要注意，直接获取`selrow`可能在多次选中同一行后无法获取到正确的行号。解决办法是在外部定义一个变量`selId`，并在`onSelectRow`事件中设置这个变量的值。 ```javascript var selId; onSelectRow: function (rowid, status) { selId = rowid; // 给最外层的selId赋值 } ``` - 获取多个选中行的id：可以使用`getGridParam`的`selarrrow`参数，它返回一个以逗号分隔的id字符串。 ```javascript var ids = $('#gridTable').jqGrid('getGridParam', 'selarrrow'); ``` - 获取所有行的ID数组：调用`getDataIDs`方法，它将返回所有行的ID数组。 ```javascript var ids = $("jqgridtableid").jqGrid('getDataIDs'); ``` - 获取行数据：传入rowId，可以获取到选定行的详细数据。 ```javascript var rowData = $('#gridTable').jqGrid('getRowData', rowId); ``` 2. 分页功能：jqGrid内置了强大的分页功能，可以通过配置参数来实现。例如，`pager`参数指定分页控件的位置，`rowNum`设置每页显示的记录数，`loadonce`决定是否一次性加载所有数据，以及`loadError`处理加载失败的回调函数。 3. 搜索功能：jqGrid提供多种搜索选项，如基本搜索、高级搜索和自定义搜索。`searchGrid`方法可以用来开启搜索功能，而`postData`对象则可以设置搜索条件。例如，`search:true`开启搜索，`filters`字段可以包含复杂的搜索过滤规则。 4. 后台分页实现：jqGrid支持服务器端分页，这意味着前端发送请求时会包含当前页码、每页记录数等信息，服务器根据这些信息返回对应的数据。在服务器端，你需要处理这些请求参数，进行相应的数据查询并返回。 5. 自定义列和列模型：你可以通过定义`colModel`来设置列的名称、宽度、对齐方式等属性，同时可以设置编辑、排序、隐藏等功能。 jqGrid提供了一整套完整的解决方案，用于创建交互式、数据丰富的表格，同时支持数据的分页和搜索功能。通过熟练掌握jqGrid的使用，开发者可以更高效地处理前端数据展示和用户交互。