jqGrid进阶教程：自定义浏览导航栏

本资源是一份关于jqGrid的进阶学习笔记，主要讲解如何在浏览导航栏添加自定义按钮。笔记中提供了HTML和JavaScript代码示例，包括引入jqGrid及相关CSS样式文件，以及数据的本地化存储示例。 jqGrid是一款强大的jQuery插件，用于创建功能丰富的表格，支持数据的分页、排序、筛选等多种操作。在进阶篇(一)中，主要关注的是如何定制化jqGrid的浏览导航栏，以便添加符合应用需求的额外功能。 首先，HTML部分设置了一个带有id为"grid-table"的表格元素和一个id为"grid-pager"的分页导航栏。这些元素是jqGrid的基础结构，用于展示数据和处理用户交互。 接着，引入了必要的CSS文件，如`jquery-ui.min.css`, `jquery-ui.theme.min.css`, `ui.jqgrid-bootstrap-ui.css`, 和 `ui.jqgrid.css`，它们提供了jqGrid的样式和主题，使其与Bootstrap框架兼容，提升界面美观度。 然后，加载了jQuery库和jqGrid的相关JavaScript文件，包括`jquery-1.11.0.min.js`, `i18n/grid.locale-cn.js`, 和 `jquery.jqGrid.min.js`。`grid.locale-cn.js`是为了实现中文本地化，使得提示信息和菜单以中文显示。 在JavaScript部分，定义了一个变量`grid_data`，其中包含了多条模拟数据，每条数据都有id、type、pay、name和text等属性，这些数据将在jqGrid中展示。当`datatype`设置为"local"时，意味着数据将从这个数组中获取，而非远程服务器。 为了在jqGrid的浏览导航栏添加按钮，可以使用jqGrid的`navGrid`方法，它允许我们自定义添加编辑、查看、添加、删除等操作按钮，还可以添加自定义按钮。例如： ```javascript $("#grid-table").jqGrid({ data: grid_data, datatype: "local", colModel: [/* 列定义 */], pager: "#grid-pager", viewrecords: true, // ...其他配置 }).navGrid("#grid-pager", { edit: false, add: false, del: false, search: false, refresh: true, // 添加自定义按钮 toppager: true, buttons: [ { caption: "自定义按钮", onClickButton: function () { alert("点击了自定义按钮！"); } } ] }); ``` 在上面的代码中，`navGrid`接收两个参数：一个是分页导航栏的id，另一个是一个对象，包含各种操作的配置。通过`buttons`属性，我们可以定义新的按钮，并通过`onClickButton`指定点击按钮时执行的函数。 这份jqGrid的学习笔记深入介绍了如何利用jqGrid构建具备复杂功能的表格，特别是如何在浏览导航栏添加自定义按钮，对于开发者来说，是进一步掌握jqGrid功能和定制化的好材料。