如何将Select2插件集成到JQuery数据表CellEdit上？

Question

在我的应用程序中，我已经集成了一个JQuery数据表。但是，我想添加一个内联编辑器。 jQuery数据表具有用于内联编辑的功能，但这不是免费的。

因此，我在Google上搜索了另一个内联编辑器，发现了一个提供内联编辑的开源库CellEdit。我已经在数据表中成功实现了它，并且运行良好。

但是，我想将Select2 JQuery plugin添加到下拉列表中，因为我的应用程序数据表下拉列表包含许多值。因此，我无法轻松选择值。 Select2插件在下拉菜单中提供了一个搜索选项，我可以使用它轻松找到确切的选项。但是，CellEdit没有该功能。谁能帮我添加Select2插件？

当前下拉列表

所需的下拉菜单（带有搜索选项）

Answer 1

我尝试了@jawahar N 的建议，但没有看到预期的输出。我意识到我没有定义“myselect”css 类。

如果您想要快速输出，请使用类“js-example-basic-single”而不是“myselect”。这在 select2.org 网站 https://select2.org/getting-started/basic-usage 中推荐。

不要忘记添加 select2 css 类和 javascript 文件。

Answer 2

我搜索了很多东西，却找不到任何解决方案。因此，我研究了这个https://github.com/ejbeaty/CellEdit核心JS文件。

在此路径（https://github.com/ejbeaty/CellEdit/tree/master/js）中可用。

最后，我找到了解决此问题的方法。

在 Core JS文件中，他们处理了'getInputHtml'函数上的所有输入类型（文本框，下拉列表，日期字段）。

实际上，在此插件中，他们为两种类型的下拉菜单编写了代码。一个是带有“确认和取消”按钮，称为“列表确认” ，另一种是没有任何按钮的“列表” 。它由onChange自动处理。

因此，在此'getInputHtml'函数中，他们为两种类型的下拉菜单都编写了一个开关盒。

1. 案例“列表确认”
2. 案例“列表”

要集成select2插件，我们需要做以下事情，

1. 需要在我们的下拉菜单中添加类名，例如select class="myselect"

2. 需要在脚本内部添加以下代码， $(".myselect").select2();

如果您需要使用搜索选项进行下拉。请替换下面的代码，而不是核心JS文件中的旧代码，

1。案例“列表确认”：

case "list-confirm": // List w/ confirm
    input.html = startWrapperHtml + "<select class='myselect " + inputCss + "'>";
    $.each(inputSetting.options, function (index, option) {
        if (oldValue == option.value) {
            input.html = input.html + "<option value='" + option.value + "' selected>" + option.display + "</option>"
        } else {
            input.html = input.html + "<option value='" + option.value + "' >" + option.display + "</option>"
        }
    });
    setTimeout(function () {
        $(".myselect").select2();
    },100);
    input.html = input.html + "</select>&nbsp;<a href='javascript:void(0);' class='" + confirmCss + "' onclick='$(this).updateEditableCell(this);'>Confirm</a> <a href='javascript:void(0);' class='" + cancelCss + "' onclick='$(this).cancelEditableCell(this)'>Cancel</a>" + endWrapperHtml;
    input.focus = false;
    break;

2。案例“列表”：

case "list":
        input.html = startWrapperHtml + "<select class='myselect" + inputCss + "' onchange='$(this).updateEditableCell(this);'>";
        $.each(inputSetting.options, function (index, option) {

            if (oldValue == option.value) {
                input.html = input.html + "<option value='" + option.value + "' selected>" + option.display + "</option>"
            } else {
                input.html = input.html + "<option value='" + option.value + "' >" + option.display + "</option>"
            }
        });
        setTimeout(function () {
            $(".myselect").select2();
        },100);
        input.html = input.html + "</select>" + endWrapperHtml;
        input.focus = false;
        break;

现在，我们可以在下拉菜单中查看搜索选项。请参见下面的屏幕，