2015 年 9 月 11 日，星期五

多行批量编辑

Editor 1.5 现已发布近一个月，尽管发布说明和示例页面中对新功能有说明，我还是想用两篇博客文章借助代码示例详细探讨一些新功能。对于从上一版本升级的用户和只想了解 Editor 功能集的用户来说，这将很有趣。

Editor 1.5 中有三个主要新功能

多行（批量）编辑
服务器端事件
数据提交控件

多行（批量）编辑

在很多用例中，一次编辑单行数据很完美，Editor 设计为尽可能地简化此操作，但同时更新多行中的值也能节省大量时间，比如将待办事项列表中的项目标记为已完成或对数据库中的项目重新分类。

Editor 1.5 支持开箱即用的多行编辑功能，无需指定其他选项。此外，最终用户看到的界面与单行界面几乎相同，所以他们会立刻觉得很熟悉。用户只需要通过cmd/ctrl 和shift单击表格中的多个行来选择它们。如果您想尝试使用，Editor 网站上的所有示例都支持多行编辑。

界面

考虑多行编辑时的一个重要要点是允许某些字段保留其各自的值，同时允许其他字段在行之间设置为通用值。例如，考虑一个部件数据库，您希望向多个项目添加一个标签 - 部件编号和描述不应该改变，但标签字段应该改变。

当用户选择要编辑的多行时，对于具有不同值的字段，Editor 将略微修改其显示方式；它将显示“多值”消息，并邀请用户单击该消息，如果他们希望编辑该字段。如果他们不单击消息，则将保留各个字段值。如果他们单击消息，则会为正在编辑的所有行设置通用值。用户还可以选择撤消单击字段后设置的各个值。

API

Editor 的默认界面允许快速批量编辑表格中的项目，但在您使用多行编辑 API 时，它变得非常有趣。虽然 UI 允许保留原始值或设置通用值，但 API 还提供了在每行的每个字段中设置各个值的功能。

此 API 引入了提供有用的批量编辑工具的功能，例如自动填充数据和行重新排序给最终用户，而您只需编写几行代码。

您还可以使用 API 开发自己的批量编辑工具。Editor 针对此类交互提供了以下方法

multiGet() - 获取一个或多个字段的字段值
multiSet() - 设置一个或多个字段的字段值
field().multiGet() - 获取一行或多行字段值
field().multiSet() - 设置一行或多行字段值
field().isMultiValue() - 判断字段是否为正在编辑的行具有个性值

为了举例说明，考虑包含每个客户财务信息的客户表，包括货币汇率。为此表的编辑器实例具有名为 exchange-rate 的字段，而我们希望使用新值更新此字段。

如要编辑所选行并设置通用值，我们可以在字段上使用 set() 方法

var rate = 1.41459; // Could come from an API, or user input

editor
    .edit( table.rows( { selected: true } ).indexes() )
    .set( 'exchange-rate', rate )
    .submit();

注意如何使用 rows( { selected: true } ) 获取所选行。这是选择扩展功能的特性。

现在考虑我们可能希望为客户汇率添加佣金，其中佣金由表中的另一个字段 commission 定义。现在，佣金值对于每个客户都是唯一的，我们需要循环遍历每行，将佣金添加到新的汇率

var rate = 1.41459; // Could come from an API, or user input
var rows = table.rows( { selected: true } ).indexes();

editor.edit( rows );

$.each( rows, function (i, rowIdx) {
    var row = table.row( rowIdx );

    editor.field( 'exchange-rate' ).multiSet( row.id(), rate + row.data().commission );
} );

editor.submit();

在此情况下，我们使用 field().multiSet() 设置个性值（针对使用 row().id() 获得的每个所选行）。使用 row().data() 检索行数据用于计算。

然后使用 submit() 通过单个 Ajax 调用将批量编辑提交至服务器。

在多行编辑中使用的数据格式，详细介绍在编辑器手册中。

升级

如果您要从之前的编辑器版本更新以使用新的多行编辑特性，则我们需要考虑两个重要要点

新的按钮和选择扩展
数据交换格式更新

按钮和选择

您可能注意到上面的代码示例，以及所有编辑器示例都使用称为按钮和选择的两个 DataTables 扩展。这些扩展在编辑器 1.5 中同时引入，为按钮显示提供一个通用库，分别用于 DataTables 中与 DataTables API 完整集成的行、列和单元格选择选项。

按钮和选择替换了已经停用的旧 TableTools 扩展的功能。TableTools 仍可以在编辑器 1.5 中正常运行，但是不支持多行编辑。

为了将多行编辑与编辑器配合使用，如果当前使用 TableTools，则必须更新软件以改用按钮和选择。这是一个简单的进程，其中包括在您的应用中包含按钮和选择软件（请参阅下载构建器）并更新您的初始化。

例如，如果您在 TableTools 中使用 table 初始化中以下内容来创建三个编辑按钮并启用行选择

tableTools: {
    sRowSelect: "os",
    sRowSelector: 'td:first-child',
    aButtons: [
        { sExtends: "editor_create", editor: editor },
        { sExtends: "editor_edit",   editor: editor },
        { sExtends: "editor_remove", editor: editor }
    ]
}

您现在将使用以下内容达到相同效果

select: true,
buttons: [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
]

这是按钮和选择的初始化，当然，还有很多其他选项，例如数据导出（CSV、Excel 和 PDF）和列可见性按钮，以及行选择行为控件。有关详细信息，请参阅按钮和选择文档。

数据交换格式变更

在 Editor 中引入多行编辑需要对 Editor 使用的客户端/服务器数据交换格式进行更新。

如果你使用的是 Editor 提供的 PHP 或 .NET 库，则无需进行任何更改，除非你直接拦截了数据。但是，如果你直接访问数据或已为 Editor 编写了自己的服务器端库，则必须为此更新代码，否则可以禁用多行编辑并使用旧版协议 (legacyAjax)。如果此操作对你产生影响，则可以使用升级文档。

下一步

这已完成对 Editor 多行编辑功能的介绍。希望你的用户能在这一新能力中发现很大的好处！如果你对此功能有任何反馈或疑问，请随时在 DataTables 论坛中提问。