JQGrid 列编辑与行操作实战指南

本文主要介绍了JQGrid的使用方法，包括列编辑、添加行和删除行的功能。在示例代码中，展示了如何初始化一个JQGrid列表，设置列的映射，以及数据的来源和列的显示配置。 JQGrid是一款强大的JavaScript组件，用于创建动态的、交互式的表格。它提供了丰富的功能，如分页、排序、过滤、编辑等，适用于Web应用程序的数据展示。在给出的代码段中，JQGrid被用来显示和管理一个数据列表，涉及的关键概念和方法包括： 1. **初始化JQGrid**: 使用`$(document).ready()`确保在页面加载完成后再执行`initPlsfList()`函数。这个函数是初始化JQGrid列表的核心。 2. **缓存表列数组**: `cellArray`是一个对象数组，用于存储页面元素名称（key）与数据库字段名（value）的映射关系。这样做是为了方便后续在JQGrid中设置列属性时使用。 3. **设置列映射**: 在`initPlsfList`函数内，定义了`cellArray`，将页面元素的名称与数据库字段对应起来。例如，`cellArray["zoneID"] = "ZONE_ID"`表示页面上的"zoneID"字段对应数据库中的"ZONE_ID"字段。 4. **JQGrid配置**: 创建JQGrid实例时，通过`$("#plsfList").jqGrid()`进行配置。设置了以下参数： - `url`: 数据源，这里是一个动态生成的URL，用于获取JSON数据。 - `datatype`: 数据类型，设置为"json"，表明数据将以JSON格式返回。 - `mtype`: HTTP请求类型，设置为"POST"。 - `height` 和 `width`: 分别设置表格的高度和宽度为"auto"，让其自动适应容器大小。 - `colNames`: 列头的文本，使用`<fmt:messagekey>`标签来获取国际化资源的值。 - `colModel`: 定义每列的详细信息，包括列名、索引、宽度、是否可编辑、格式化函数等。 5. **列编辑**: 以`valid`列为例，设置了`editable: true`使其可编辑，并使用`formatter: formatValid`和`edittype: 'checkbox'`定义了编辑方式为复选框。`editoptions`进一步定义了复选框的值和默认值。 6. **数据获取**: JQGrid的URL参数`caseID`是从页面的上下文中获取的，通过`${caseID}`表达式注入到请求中，使得请求的数据能够根据特定的`caseID`进行过滤。 7. **自定义格式化函数**: `formatter: formatValid`表明存在一个名为`formatValid`的自定义函数，用于处理`valid`列的数据显示，但具体实现没有在给出的代码中。 8. **列模型配置**: 每个列都有一个`colModel`对象，比如`{name: 'zoneName', index: 'zoneName', width: 100, editable: false}`，定义了列的名称、索引、宽度和是否可编辑。 这段代码展示了如何利用JQGrid创建一个可编辑的表格，其中包含了数据获取、列映射、编辑功能以及自定义列配置。对于Web开发人员来说，理解这些关键点有助于构建自己的交互式数据展示界面。