jquery Easyui Datagrid实现批量操作（编辑，删除，添

深入了解 jQuery Easyui Datagrid：实现批量操作（编辑、删除、添加）

长沙网络推广在此为您分享一个关于 jQuery Easyui Datagrid 的实用技巧。对于后台系统的复杂表单，尤其是进销存和销售订单的处理，Easyui Datagrid 的批量操作功能显得尤为重要。尽管 Easyui Datagrid 提供了行内编辑功能，但在实际操作中，我们可能需要更灵活的批量编辑、删除和添加操作。

让我们首先了解一下原版的编辑功能，参考 Easyui 1.5.1 的 Demo（demo/datagrid/rowediting.html）。在此基础上，我们将实现更高度的自由编辑：

1. 批量追加多行：不再局限于单次添加一行，您可以根据需要一次性追加多行数据。

2. 任意位置追加行：不再固定追加位置，您可以在 Datagrid 中的任何位置进行追加。

3. 随时编辑任意位置的行：不仅仅是新添加的行，您可以随时对 Datagrid 中的任何行进行编辑。

4. 统一的保存验证：在保存所有更改之前，进行一次全面的数据验证，确保数据的准确性和完整性。

实现这些功能的关键在于对原有 rowediting.html 的修改。通过适当的 JavaScript 代码调整和 Easyui Datagrid 参数配置，您可以轻松实现这些高级功能。这不仅提高了工作效率，也使得系统更加符合用户需求。

第一事件：点击行进入编辑状态

想象一下，你正在操作一个数据网格，当你点击某一行时，它将进入编辑状态，等待你进行更改。这个过程是这样的：

当你点击某行时，如果当前没有正在进行编辑的行（通过`editIndex`判断），程序会先结束当前编辑（通过`endEditing()`函数）。然后，它会选择你点击的行（`datagrid('selectRow', index)`），并开始编辑该行（`datagrid('beginEdit', index)`）。接着，获取该行编辑器的焦点，以便你可以立即开始编辑。这一切完成后，将当前编辑行的索引赋值给`editIndex`。如果正在编辑的行未能成功结束编辑，它会立即重新选择正在编辑的行。

第二事件：删除选中的行

在数据网格的顶部菜单中，有一个“Remove”按钮，点击它可以删除选中的行。如果数据行中包含一个“-”标志，点击该标志也可以删除该行。

在删除之前，程序会先检查是否有正在编辑的行。如果有，它会先取消该行的编辑，然后删除该行。完成这些操作后，将`editIndex`设置为未定义。

第三事件：添加新行

第：保存操作记录

在完成增加、修改或删除行的操作后，你需要保存这些操作记录。程序首先检查是否结束编辑状态。然后，通过`datagrid('getChanges')`获取所有更改的行，包括新增、删除和更新的行。对于每种更改类型，程序都会将其转化为JSON字符串格式并存储在对象`effectRow`中。这些操作记录可以用于后续的提交操作。在提交完成后，可以通过调用`datagrid('aeptChanges')`方法接受更改并重新绑定数据。通过调用`cambrian.render('body')`更新页面显示。整个过程确保了数据的完整性和准确性得以保存。