jqgrid 简单学习笔记

JqGrid是一款基于jQuery的表格插件，用于创建功能丰富的数据网格。它提供了强大的数据管理能力，包括数据的检索、排序、分页、编辑、过滤和显示等多种功能。JqGrid的灵活性使得开发者几乎可以实现所有与表格相关的复杂操作。 在JqGrid的学习中，首先需要理解其基本配置和用法。在示例中，我们看到JqGrid的初始化代码，通过`jQuery("#jqgridlist").jqGrid()`方法创建一个表格。这个表格的数据源通过`url`属性指定，通常是一个处理数据的服务器端脚本，如`DataHandler.ashx`。`datatype`属性定义了数据类型，此处使用了一个自定义函数，这意味着数据在初次加载后会被保存为本地数据，方便后续的定制操作。 JqGrid的列配置由`colNames`和`colModel`两个数组决定。`colNames`用于设置列的显示名称，而`colModel`则包含每列的详细信息，如字段名（`name`）、索引（`index`）、是否可编辑（`editable`）、排序规则（`sortable`）以及编辑选项（`editoptions`）等。 在示例中，我们看到一些特定功能的实现，比如： 1. **数据加载**：通过`$.ajax`异步请求数据，然后使用`addJSONData`方法将数据添加到表格中。 2. **验证**：在`afterShowForm`和`afterclickPgButtons`事件中，对编辑日期进行验证，确保只能修改当月之后的计划。 3. **提交前的准备**：在提交数据到服务器之前，需要将`datatype`设置为`json`，以确保请求能够正确发送。 4. **交互性**：JqGrid支持查询、修改、分组等操作。在本示例中，它还实现了查询、分组和一些基础的编辑功能。 此外，JqGrid还提供了丰富的搜索和过滤选项，通过`searchoptions`和`search`属性可以定义列的搜索行为，如允许的比较运算符（`sopt`）。 对于初学者来说，查阅JqGrid的官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs）和演示（http://trirand.com/blog/jqgrid/jqgrid.html#t107）是非常有帮助的。文档详细解释了各种选项和方法，而演示则提供了直观的功能展示和实例代码。 在实际项目中，JqGrid可以和服务器端框架（如ASP.NET、PHP或Java）结合使用，通过AJAX实现动态数据加载和更新。同时，还可以利用其内置的编辑模式（如弹出式编辑、行内编辑或表头编辑）以及自定义事件来实现复杂的业务逻辑。 JqGrid是一个功能强大且高度可定制的表格组件，适合在需要进行大量数据管理和交互的Web应用中使用。通过深入学习和实践，开发者可以充分利用其特性，提升Web应用的用户体验和数据管理效率。