jqGrid进阶教程：添加导航栏功能

"jqGrid 学习笔记整理——进阶篇(一) 是一篇关于jqGrid高级用法的教程，适合需要深入理解该工具的开发者参考。内容包括如何在浏览导航栏添加自定义按钮，以及如何初始化和配置jqGrid的数据。" jqGrid是一款功能强大的JavaScript数据网格插件，用于展示和操作大量结构化数据。这篇进阶篇(一)的笔记主要关注jqGrid的高级特性和定制化设置。 首先，为了在jqGrid的浏览导航栏添加自定义按钮，我们需要在HTML代码中设置相应的结构。在示例中，可以看到`<div id="grid-pager"></div>`这一部分，这将作为jqGrid的分页区域，也是放置自定义按钮的地方。接下来，在JavaScript部分，我们可以利用jqGrid提供的API来添加这些按钮。 例如，可以使用`navButtonAdd`函数来添加一个新的按钮。这个函数接受多个参数，如按钮的ID、文本、图标、点击事件处理函数等。例如： ```javascript $("#grid-pager").navButtonAdd({ caption: "我的按钮", // 按钮文本 buttonicon: "ui-icon-plus", // 图标，可以是jQuery UI的图标名称 onClickButton: function () { // 这里编写按钮被点击时执行的代码 }, position: "last" // 添加到按钮列表的最后 }); ``` 除了添加按钮，这篇笔记还涉及到了jqGrid的数据初始化。在示例中，`grid_data`是一个包含多条数据的对象数组，每条数据都有`id`、`type`、`pay`、`name`和`text`属性。这些数据用于填充jqGrid。初始化jqGrid时，可以通过`jQuery("#grid-table").jqGrid({})`来配置和创建表格，其中的配置项包括数据源、列定义、分页、排序等。 例如，对于本地数据（`datatype: "local"`），可以设置`data`选项来指定数据源： ```javascript jQuery("#grid-table").jqGrid({ data: grid_data, colNames: ["ID", "类型", "金额", "名称", "描述"], // 列头显示的文字 colModel: [ // 列定义，对应数据对象的属性 { name: "id", index: "id", width: 50 }, { name: "type", index: "type", width: 100 }, { name: "pay", index: "pay", width: 80, formatter: 'number', align: 'right' }, { name: "name", index: "name", width: 150 }, { name: "text", index: "text", width: 200 } ], pager: "#grid-pager", rowNum: 10, // 每页显示的行数 rowList: [10, 20, 30], // 分页选项 sortname: "id", // 初始排序的字段 sortorder: "asc" // 初始排序的顺序 }); ``` 此外，jqGrid还支持多种其他功能，如编辑、搜索、过滤、导入导出数据等。在进阶篇中，可能还会介绍如何使用这些特性，以及如何通过事件监听和自定义函数来扩展jqGrid的功能，以满足特定项目需求。 jqGrid提供了一套完整的解决方案，用于创建交互式的表格应用，这篇笔记是掌握其高级特性的良好起点，对提升Web应用的数据展示和管理能力有很大帮助。