2014 年 7 月 25 日星期五

Editor 中重复按钮

Editor 为可编辑 DataTable 中所需的三种基本按钮提供内置支持：创建、编辑和删除。另一项特别有用的操作是能够创建一个新记录，将表中现有行的值用作默认值，即复制按钮。这可以在使用具有通用信息的数据时促进快速数据录入；例如，将每月发票的信息输入到付款数据库中，或通过赛季跟踪一支球队的得分。

虽然 Editor 中没有内置的复制按钮类型，但这篇博客文章将展示如何通过 Editor API 非常轻松地执行该功能，使用一个 TableTools 按钮来提供用户交互，最终为 TableTools 创建一个可重复使用的按钮插件，它可以通过添加一行代码用在你的任何表中。

本文介绍的信息的结果可以参见 Editor 网站上的复制按钮示例。

复制操作

实际上，利用 Editor API，创建用来实际创建重复项的代码非常简单，它涉及一项两步操作

将行置于编辑模式（使用 edit()），以用作新条目的基础。这会将字段设置为相关行的值。我们只需对用户隐藏编辑表单（将第二个参数传递给 edit()，即 false）然后使用 val() 从表单中读取所有值。
现在显示一个创建表单，并使用从步骤一读取的值填充字段值，这可以通过 create() 和 set() 方法来完成。

var values = editor.edit( row, false ).val();

editor
    .create( {
        title: 'Duplicate',
        buttons: 'Create from existing'
    } )
    .set( values );

其中

editor 是要使用的 Editor 实例
row 是 tr 元素，其数据将被用作新记录的基础

可以直接从行读取数据（row().data()），并跳过步骤 1，但添加此步骤允许使用复杂的 / 嵌套 JSON 数据，例如，联结表中的数据。此外，它确保上述几行内容完全可以针对任何 Editor 表单重复使用。

请注意，因为所有这些操作都是通过 Editor API 完成的，所以你可以执行其他任务，例如，在不需要用户输入的情况下自动提交新记录，或者将字段设置为与原值不同的值（如果有一个“创建”字段，这可能很有用）。

TableTools 按钮

现在我们有了基本复制代码，让我们创建一个按钮，让用户触发复制操作。你可以使用任何事件处理程序触发此操作（按键、点击链接等），但为了与 Editor 的三个标准 TableTools 创建、编辑和删除按钮保持一致，这里我们将创建一个新的复制按钮。

创建带有 TableTools 按钮的数据表时，tableTools 选项要传入，其中带有按钮说明数组 (aButtons)。对于 Editor，这通常看起来像

tableTools: {
    sRowSelect: "os",
    aButtons: [
        { sExtends: "editor_create", editor: editor },
        { sExtends: "editor_edit",   editor: editor },
        { sExtends: "editor_remove", editor: editor }
    ]
}

我们不仅限于这三个按钮，可以根据需要添加任意数量的按钮，定义所需的操作。通过按钮激活时采取的操作由 fnClick 属性控制，而且我们可以使用现有按钮作为通过 sExtends 选项创建一个新按钮的基础。

虽然说的有点多，但总体来说只需将如下代码添加到 aButtons 数组中即可

{
    sExtends:    "select_single",
    sButtonText: "Duplicate",
    fnClick:     function( button, conf ) {
        var node = this.fnGetSelected();

        if ( node.length !== 1 ) {
            return;
        }

        // ... perform duplicate action ...
    }
}

这里我们扩展了 select_single 按钮类型（仅在选中一行时启用），将按钮文本设置为复制并准备一个 fnClick 函数。在 fnClick 中，我们使用 TableTools 的 fnGetSelected API 方法获取所选行的节点（我们在上面的复制代码中使用的 row 变量）。现在剩下的就是将上面的代码放入函数中！

你可以在 Editor 网站上的 Editor 复制按钮示例中实时看到此代码的运行情况。

TableTools 扩展

最后的任务是创建一个可重复使用的 TableTools 按钮，它可以像内置 Editor 按钮类型一样轻松使用。这可以通过以下方式完成：将我们的新按钮类型添加到 $.fn.dataTable.TableTools.buttons 对象，扩展现有按钮作为模板

var buttons = $.fn.dataTable.TableTools.buttons;

buttons.editor_duplicate = $.extend( true, {}, buttons.select_single, {
    "sButtonText": 'Duplicate',
    "editor":      null,
    "fnClick":     function( button, conf ) {
        var node = this.fnGetSelected();

        if ( node.length !== 1 ) {
            return;
        }

        var values = conf.editor.edit( node[0], false ).val();

        conf.editor
            .create( {
                title: 'Duplicate',
                buttons: 'Create from existing'
            } )
            .set( values );
    }
} );

请注意，editor 变量已更新为 conf.editor - 这样我们可以在创建按钮时将按钮的 editor 属性设置为主要脚本中的按钮，以使按钮知道要引用的哪个 Editor 实例。

在你初始化 DataTables 之前的任何地方安置上述代码，然后你将能够像这样创建按钮数组（注意第 6 行添加了 editor_duplicate 类型）

tableTools: {
    sRowSelect: "os",
    aButtons: [
        { sExtends: "editor_create",    editor: editor },
        { sExtends: "editor_edit",      editor: editor },
        { sExtends: "editor_duplicate", editor: editor },
        { sExtends: "editor_remove",    editor: editor }
    ]
}

运行示例

如上所述，如果你想实时看到此代码的运行情况，Editor 网站上的一个示例显示了正在进行操作的复制按钮。