jqgrid页面展示实例教程及文件资源

### jqGrid 简介 jqGrid 是一个基于 jQuery 的 JavaScript 插件，用于在网页上以表格形式展示和编辑数据。它提供了一套功能完善的用户界面组件，用于创建复杂的网格布局，支持排序、分页、搜索、选择等多种操作。该插件还支持自定义编辑器，以及多种事件和回调函数，方便开发者根据具体需求进行定制和扩展。 ###jqGrid 核心概念 #### 1. 数据绑定 jqGrid 使用 JSON 格式的数组或对象作为数据源。这种数据绑定方式使得从服务器获取数据变得更加方便，也易于维护。 #### 2. 表格操作 - **排序**: 用户可以通过点击列头对数据进行升序或降序排序。 - **分页**: 自动实现分页功能，用户可通过翻页控件浏览多页数据。 - **搜索**: 提供内置的搜索功能，允许用户对特定列进行条件搜索。 - **选择**: 用户可以行选择，单选或多选，以便进行批量操作。 #### 3. 事件和回调 jqGrid 提供了丰富的事件和回调函数，例如 `onGridComplete`, `onSelectRow`, `beforeProcessing` 等，这些使得开发者可以在网格行为发生前后执行自定义逻辑。 ###jqGrid 实例分析 #### 文件说明 - `MyHtml.html`: 这是包含jqGrid实例的HTML文件。 - `jquery-ui-1.8.2.custom.css`: 自定义的jQuery UI样式表，提供界面美观性的自定义。 - `grid.locale-zh_CN.js`: jqGrid 的本地化文件，支持中文显示，其中包含中文翻译和本地化设置。 - `jquery-ui-1.8.2.custom.min.js`: 压缩版本的jQuery UI，以减小文件大小并提高页面加载速度。 - `jquery-1.4.2.min.js`: 压缩并优化过的 jQuery 库文件，是使用jqGrid所必需的。 - `jquery.ui.all.js`: 综合了jQuery UI的所有组件，为页面提供额外的用户界面功能。 - `jquery.jqGrid.min.js`: jqGrid 插件的压缩版本，包含了创建表格所需的所有功能。 #### 代码实现 在 `MyHtml.html` 文件中，开发者会按照以下步骤实现一个简单的jqGrid示例： ##### 1. 引入依赖 确保所有的CSS和JS文件都已正确链接到HTML文件中。 ```html <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.2.custom.css"> <link rel="stylesheet" type="text/css" href="js/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.ui.all.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="js/grid.locale-zh_CN.js"></script> ``` ##### 2. 设置HTML结构 创建一个用于显示网格的表格容器。 ```html <div id="list" style="height: 280px; width: 99%;"></div> ``` ##### 3. 初始化jqGrid 通过JavaScript代码初始化jqGrid，绑定数据，并定义列的显示方式以及其它交互功能。 ```javascript $(document).ready(function(){ $("#list").jqGrid({ url:'服务器端脚本地址', // 数据源地址，如PHP脚本 datatype: 'json', // 数据类型，此处为JSON mtype: 'POST', // 请求类型，此处为POST colNames:[...], // 列名称数组 colModel:[...], // 列模型数组，定义每列的数据结构 pager: '#pager', // 定义分页控件的ID sortname: 'id', // 默认排序列 sortorder: "desc", // 默认排序顺序 viewrecords: true, // 显示记录总数 caption:"我的jqGrid示例"// 网格标题 }); }); ``` ##### 4. 自定义功能 在上述代码基础上，可以根据需求添加自定义功能，如添加、编辑、删除数据等操作。 ### 总结 通过这个简单的jqGrid例子，我们可以看到如何将jqGrid集成到一个HTML页面中，并通过少量的代码实现丰富的表格操作功能。jqGrid的灵活性和强大的功能使其成为开发动态网页表格的理想选择。开发者只需遵循上述步骤并结合具体需求，就可以创建出符合业务逻辑的网格应用。