Datatable встроенное редактирование без плагина редактора

Я использовал плагин "editor" для таблицы данных, а далее был код:

Редактор таблицы данных, определяемый как:

        editor = new $.fn.dataTable.Editor( {
        ajax: '/contact/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                    name: "id",
                  }, {
                    name: "category",
                    type: "check",
                    options: [
                              { label: 'Science', value: "Science" },
                              { label: 'Maths', value: 'Maths' },
                              { label: 'Economics', value: 'Economics' },
                             ]
                 }
                    ................
              ]
    });

.....

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
            } );

Прикрепление страницы следующим образом: Когда мы нажимаем на категорию, отображается раскрывающийся список для редактирования (с помощью плагина редактора).

Но проблема в том, что плагин редактора datatables не является open source, и мой проект вообще не позволяет платный плагин.

Может ли кто-нибудь помочь мне для встроенного редактирования в datatables без плагина 'editor'?

Ниже приведен код, который я написал без редактора:

Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/Contact/list/' + Contact.id,
                "dataSrc": function(check) {
                   check.id = Contact.id;
                   return json.check;
                  },
                },
            "responsive": true,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "category" },
                { "data": "course" },
                ]
        } );

Категория и курс будут выпадающим списком - и это должно быть редактирование встроенного. Ниже приведен пример страницы.

Мне нужно "Категория" в качестве раскрывающегося списка встроенного редактора, а затем появится кнопка для сохранения ввести изображение здесь

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

Ответы

Ответ 1

Datatables rock! И SpryMedia позволили нам играть с ним бесплатно! Я не на 100% уверен, что использовал плагин редактора, несмотря на его покупку, но я рад, что я каким-то образом способствовал его развитию. Одна из основных причин, по которым я не использовал плагин, - это то, что я слишком скупился, чтобы позволить себе какое-то время, поэтому написал свои собственные версии, и это действительно не так сложно. Шаги довольно просты:

  • Обнаружение щелкните по строке (вы уже это сделали)
  • Получить данные из строки (совсем не сложно)
  • Заполните форму с этими данными (возможно, в рамках модального)
  • Обновление сервера с новыми значениями после отправки формы
  • Обновление строки после обновления сервера

Плагин делает все, что легко, и позволяет вам также определить бэкэнд. Вышеупомянутые шаги не так уж трудны, но я не сталкивался с тем, что делает все это для вас, кроме плагина редактора. Проделайте шаги, и вы доберетесь туда.

Ответ 2

Я написал свой собственный код для редактирования inline и сделал так, чтобы вы могли редактировать всю строку и определять столбцы, которые вы хотите редактировать пользователем.

здесь: https://github.com/sinhashubh/datatable-examples