如何在JQuery数据库CellEdit上集成Select2插件？

Posted 2021-04-24

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

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

但是，我想将Select2 JQuery plugin添加到下拉列表中，因为我的应用程序数据表下拉列表包含许多值。所以，我无法轻易选择价值观。 Select2插件在下拉列表中提供了一个搜索选项，我可以使用它来轻松找到确切的选项。但是，CellEdit没有这种设施。任何人都可以帮我添加Select2插件吗？

电流下降

所需下拉（带搜索选项）

答案

我搜索了很多，无法找到任何解决方案。所以，我研究了这个（https://github.com/ejbeaty/CellEdit）核心JS文件。

这可以在这条路径中找到（https://github.com/ejbeaty/CellEdit/tree/master/js）。

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

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

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

因此，在这个'getInputHtml'函数中，他们为两种类型的下拉列表编写了一个switch case。

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

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

1. 需要在我们的下拉列表中添加类名称，如select class="myselect"
2. 需要在脚本$(".myselect").select2();中添加以下代码

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

1. case“list-confirm”：

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;

现在，我们可以在下拉列表中查看搜索选项。请看下面的屏幕，