Как интегрировать плагин Select2 в Datatable CellEdit JQuery? - PullRequest
Новая
       36

Как интегрировать плагин Select2 в Datatable CellEdit JQuery?

2 голосов
/ 28 апреля 2019

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

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

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

Текущее падение

Drop down screen shot

Желаемое падениеВниз (с возможностью поиска)

Drop down with search option screen shot

1 Ответ

0 голосов
/ 28 апреля 2019

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

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

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

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

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

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

enter image description here

...