jqgrid详细教程：增删查改与toolbar操作

本资源主要涉及使用jqGrid与artDialog实现CRUD操作，以及在页面上进行数据展示和交互，但并不将数据保存到数据库。jqGrid是一个强大的JavaScript表格插件，而artDialog则是一个轻量级的弹出对话框组件。 ### jqGrid介绍 jqGrid是一个基于jQuery的表格插件，支持Ajax数据加载、排序、筛选、分页、编辑等功能，非常适合用于Web应用程序的数据展示。在示例中，jqGrid用于创建一个包含多个列的表格，例如料号、料号名称、料号规格等，并设置了自动匹配宽度和固定高度，同时添加了工具条到表头。 ### jqGrid配置 ```javascript $("#grid").jqGrid({ datatype: "json", // 数据来源为JSON colNames: ['料号', '料号名称', '料号规格', '等级', '币别', '单价', '数量', '单位', '金额', '备注', 'doc_id'], // 列名 colModel: [{name: 'material_id', index: 'material_id'}], // 列定义 rowNum: 10, // 每页显示的行数 rowList: [10, 20, 30], // 分页选项 pager: '#pager', // 分页控件ID viewrecords: true, // 显示总记录数 autowidth: true, // 自动匹配宽度 height: 200, // 设置高度 toolbar: [true, "top"] // 在顶部添加工具条 }); ``` ### CRUD操作 - **Create**（创建）: 使用artDialog弹出框进行新增操作，如示例中的`add_btn`按钮点击事件。 - **Read**（读取）: jqGrid本身用于展示数据，即“读取”操作。 - **Update**（更新）: `alt_btn`表示修改按钮，点击后通常会打开一个编辑窗口更新表格中的数据，但在这个例子中，未具体描述更新逻辑。 - **Delete**（删除）: `del_btn`代表删除按钮，通常会触发删除选定行的操作，同样未详细说明实现方式。 ### artDialog使用 artDialog是一个简洁且可自定义的对话框插件，它用于创建弹出窗口，例如在此案例中用于打开新增或修改的对话框。在示例中，`add_btn`点击事件会触发一个dialog实例，但具体的dialog配置和内容未给出。 ### 页面交互 在示例代码中，还添加了一些工具条上的按钮，如新增、修改、删除和保存按钮。这些按钮的事件绑定和功能实现需要额外的JavaScript代码来处理。例如，点击`add_btn`后，会创建一个dialog弹窗，但具体的弹窗内容和操作流程未在提供的代码中体现。 总结来说，这个资源提供了使用jqGrid构建CRUD操作的基础框架，但并未完全实现保存到数据库的功能。要完成一个完整的应用，还需要补充包括数据提交、验证、错误处理以及与服务器的交互等代码。同时，artDialog的使用也需要根据实际需求进行详细配置和内容填充。