Как интегрировать плагин Select2 в CellEdit с данными JQuery?

В моем приложении я уже интегрировал таблицу данных JQuery. Однако я хочу добавить встроенный редактор. Jquery datatable имеет возможность встроенного редактирования, но это не бесплатно.

Итак, я поискал в Google другой встроенный редактор и нашел библиотеку с открытым исходным кодом CellEdit, которая обеспечивает встроенное редактирование. Я успешно реализовал его в своей таблице данных, и он работает хорошо.

Однако я хочу добавить плагин Select2 JQuery в раскрывающийся список, поскольку раскрывающийся список данных моего приложения содержит ряд значения. Итак, я не могу легко выбирать значения. Плагин Select2 предоставляет опцию поиска в раскрывающемся списке, которую я использую, чтобы легко найти точный вариант. Однако CellEdit не имеет такой возможности. Может ли кто-нибудь помочь мне добавить плагин Select2?

Текущий раскрывающийся список

Выпадающий снимок экрана

Нужный раскрывающийся список (с возможностью поиска)

Раскрывающийся список со снимком экрана с параметрами поиска


jquery coldfusion-2016 datatables jquery-ui coldfusion
person jawahar N    schedule 28.04.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я попробовал предложение от @jawahar N и не увидел ожидаемого результата. Я понял, что не определил класс myselect css.

Если вам нужен быстрый выход, используйте класс js-example-basic-single вместо myselect. Это рекомендуется на веб-сайте select2.org https://select2.org/getting-started/basic-usage.

И не забудьте добавить класс select2 css и файлы javascript.

person Chethan Devaraj    schedule 18.05.2021

arrow_upward
0
arrow_downward

Я много искал и не смог найти никакого решения. Итак, я изучил эти ( https://github.com/ejbeaty/CellEdit ) основные файлы JS.

Это доступно по этому пути ( https://github.com/ejbeaty/CellEdit/tree/master/js ).

И, наконец, я нашел решение этой проблемы.

В базовом файле JS они обрабатывали все типы ввода (текстовое поле, раскрывающийся список, поле даты) в функции getInputHtml.

Собственно, в этом плагине они написали код для 2-х типов выпадающих списков. Один с кнопкой подтверждения и отмены. Он называется 'list-confirm', а другой - 'list' без каких-либо кнопок. Он автоматически обрабатывается 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;

Теперь мы можем просмотреть параметр поиска внутри раскрывающегося списка. пожалуйста, посмотрите на экран ниже,

введите здесь описание изображения

person jawahar N    schedule 28.04.2019