jqgrid总结

JqGrid是一款强大的JavaScript插件，用于创建交互式的表格，具有数据网格的功能，适用于Web应用程序。以下是关于JqGrid的一些核心知识点和使用技巧的详细解释： 1. **基本配置**： - `url`: 指定数据来源的URL，通常是服务器端处理请求并返回JSON或XML数据的接口。 - `datatype`: 数据类型，如'json'或'xml'，定义了从服务器获取数据的格式。 - `mtype`: 发送请求的HTTP方法，如'post'或'get'。 2. **列定义**： - `colNames`: 列头显示的文本数组。 - `colModel`: 更详细的列配置，包括`name`(数据字段名)，`index`(索引名)，`editable`(是否可编辑)等。 3. **其他配置选项**： - `rowNumbers`: 是否显示行号。 - `rowNum`: 每页显示的行数。 - `page`: 初始化的页数。 - `pager`: 分页控件的选择器，如`'#div1'`。 - `caption`: 表格的标题。 4. **事件处理**： - `onSelectRow`: 用户选择表格行时触发的函数，可以用于执行特定操作，如编辑或删除记录。 5. **子表格（SubGrid）**： - `subGrid`: 是否启用子表格功能。 - `subGridRowExpanded`: 子表格展开时触发的回调函数，用于加载子表格的数据。 6. **操作功能**： - `.navGrid`: 添加导航栏，提供添加、编辑、删除和查看等功能。 - `add`, `edit`, `del`, `view`: 分别表示是否启用这些操作。 - `addtext`, `editText`: 自定义操作按钮的文本。 7. **行操作**： - `editRow`: 编辑选定的行，`true`表示启用自动提交。 - `restoreRow`: 用于恢复之前编辑的行，避免多行被同时编辑。 8. **TreeGrid**： - `treeGrid`: 如果设置为`true`，则表格将以树形结构显示数据，便于层级关系的展示。 9. **参数传递**： - 在请求数据或执行操作时，可以通过`oper`参数传递额外的信息，如在子表格的加载中，`oper=7`可能代表特定的操作类型。 10. **隐藏列**： - 使用`hidden: true`可以将列设置为默认隐藏，如`userinfoid`和`salaryids`。 JqGrid的灵活性和功能强大性使得它成为处理大量数据和复杂交互的理想选择。开发者可以根据需求自定义样式、行为和数据处理逻辑，使其适应各种应用场景。需要注意的是，随着前端技术的发展，现代Web应用更倾向于使用React、Vue或Angular等框架，而JqGrid这样的插件可能逐渐减少使用，但它的设计理念和实现方式对于理解数据网格的实现仍有借鉴意义。