编辑面板始终可见

在你使用软件库时，你希望它能融入你的网站和设计，而不是强迫你按照它的思维模式去做。这个理念深深植根于 DataTables 和 Editor 中，体现在它们可以被各种流行的 CSS 框架设置样式的能力。特别是 Editor，它从一开始就被设计成灵活的，能融入你的应用程序。

在 Editor 中编辑表单的默认模式是使用模态窗口（有时也称为灯箱）。这对于最终用户来说可以是一个有用的界面范例，因为它在数据访问和数据编写之间进行了分离——它看起来的确像不同的层。缺点是，由于表单覆盖在页面的其他部分，你可能会失去你正在编辑数据时的上下文。这并不总是问题，但在复杂应用程序中，在编辑行时让用户参考其他数据点可能很有用。

为此，一个关于 Editor 的常见问题是，它是否有能力将表单显示在页面上的指定区域，而不是在模态窗口中，而是与其他内容并排显示。当然可以！下面显示了一个示例。在这篇文章中，我将描述如何将此示例组合在一起。

示例

此示例显示了一个只有两列的 DataTable，其右侧有一个输入区域。由于此博客文章的水平宽度限制，该表格仅显示两列，但在实际应用程序中，可以使用任意大小的表格。空间在表格和表单区域之间平均分配。

单击一行后，你会看到该行的数据立即以可编辑状态显示在表单中。有按钮可以保存任何更改，还可以删除该行。当取消选择该行时，表单区域的原始内容将再次显示，同时还有一个链接，用于输入新行的 data 这一项将在此位置显示创建表单。

要查看用于这些示例的完整 Javascript 和 CSS（请注意，它们包括一些小的自定义内容，以适合此显示），请参阅

• Javascript
• CSS

显示控制器

虽然 Editor 的默认显示是将表单显示在模型中，但实际上可以很容易地告诉它在其他地方显示表单。控制表单显示位置的代码在Editor 中被称为“显示控制器”。它有三个功能

• 初始化 - 正在创建 Editor 实例，并告诉显示控制器它将用于该 Editor。
• 显示表单 - 当 Editor 想显示表单时，它会告诉显示控制器并传入包含该表单的元素。
• 隐藏表单 - 编辑完成后或以其他方式取消表单后，Editor 会要求显示控制器取消该表单。

借助这三个简单的操作，你可以在任何你希望的位置显示 Editor 表单；这里显示的另一个元素、一个 Bootstrap 模态窗口、一个子行，甚至一个新窗口（如果你愿意的话）。

初始化

此插件的初始化可能是此代码中最有趣的部分。我们需要考虑页面上有多个编辑器的情况，每个编辑器将在不同的容器元素中显示其自己的表单。因此，与其仅仅具有一个静态显示控制器名称（如手册中所述），我们将有一个函数，我们可以在其中传递我们希望表单显示的元素，它将生成一个随机名称，该名称可用于编辑器的displayController属性。这利用了JavaScript使用闭包的能力 - 即从包围函数保留值。

function onPageDisplay ( elm ) {
    var name = 'onPage'+Math.random();
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;

    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        init: function ( editor ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        }
    } );

    return name;
}

请注意，该函数将以标准样式（将它附加到$.fn.dataTable.Editor.display）创建显示控制器插件，并带有此插件所需的标准属性。init函数的上方显示了 - open和close在下方。

这里唯一需要的初始化是确保我们保留表单显示区域中已存在的 HTML 副本。这样当行被取消选择时，它可以被重新插入。

显示表单

在open函数中显示表单非常简单。我们只需删除任何内容（注意使用 $().detach()，它将保留分配给容器中元素的事件处理程序），并附加由编辑器构建的表单。如果存在回调函数，则在表单准备好时应调用它（这对于动画等内容很有用）。

// Show the form
open: function ( editor, form, callback ) {
    elm.children().detach();
    elm.append( form );

    if ( callback ) {
        callback();
    }
},

隐藏表单

要隐藏表单（即在此示例中，当取消选择行时），与open的情况一样简单 - 仅移除内容，然后插入原始内容。同样，如果有回调，则触发它。

// Hide the form
close: function ( editor, callback ) {
    elm.children().detach();
    elm.html( emptyInfo );

    if ( callback ) {
        callback();
    }
}

完整的插件代码

尽管上述内容显示了此显示控制器插件所需的所有代码，但它需要组装。要看到具有可用代码的完成插件，请参考此页面。

事件处理

我们现在可以使用多数编辑器示例中显示的标准编辑按钮 - 也就是说表格上方显示的添加、编辑和删除并称之为完成。它可以工作，但它并不能真正符合即时访问表单的想法。

相反，我们将在选择表格中的行时显示表单。

触发编辑

当在数据表中选择一行时（通过选择扩展），会触发select事件 - 在此点，我们希望按行调用edit()（使用 rows().indexes()获取所有选定的行，而不仅仅是最新一行，这允许编辑多行）。同样，当取消选择行时，我们要调用close()。

table
    .on( 'select', function () {
        var indexes = table.rows({selected:true}).indexes();

        editor.edit( indexes, {
            title: 'Edit row'
        } );
    } )
    .on( 'deselect', function () {
        editor.close();
    } );

删除行

当选择一行时，对于本例，我们希望表格不仅能以编辑状态显示该行及其保存按钮，还要显示一个删除按钮，以便将该行从表格中移除。我们可以通过传递给 edit()（例如，使用上面使用 title 参数的对象）的 form-options 对象的 `buttons` 参数来完成此操作。这反过来利用了 buttons() 方法。

从代码中理解这一点比从文本中更简单 - 查看定义了两个按钮的代码，第一个是文本，所以它执行保存表单的标准编辑器操作（例如，submit()）。第二个按钮具有一个函数（fn），该函数将在激活按钮时被调用。在本例中，它调用了 remove() 来设置删除操作，然后立即提交。

buttons: [
    'Save changes',
    {
        label: 'Delete',
        fn: function () {
            editor
                .remove( indexes, false )
                .submit();
        }
    }
]

创建新行

剩下的唯一需要做的事情就是提供一种创建新行的方式。为此，我们只需对新行的页面文本使用标准的 jQuery 点击事件监听器，并调用 create() 方法。

在下面的代码中再次使用了 buttons 参数，本例中，它除了添加了保存按钮外，还添加了一个取消按钮。

$('#form-container').on( 'click', 'p.add-new', function (e) {
    e.preventDefault();

    editor.create( {
            title: 'Create new row',
            buttons: [
                'Save',
                {
                    label: 'Cancel',
                    fn: function () {
                        editor.close();
                    }
                }
            ]
    } );
} );

开心地定制！

DataTables 和编辑器旨在易于尽快启动并运行。毕竟，库软件的全部意义在于为您节省开发时间，以便您可以继续做其他事情！但你不需要仅仅使用默认选项 - 它们应该可以（并且可以）根据你的需要融入到应用中。

使用 API 和一些基本 Javascript，你可以定制这些库以满足你的需求。