Нажатие на ячейку запускает событие «при изменении» для каждой ячейки в строке

Question

Я использую плагин редактора для своей таблицы datatables.net.

Когда я щелкаю ячейку, чтобы редактировать встроенный файл следующим образом:

Он запускает событие onChange для каждой отдельной ячейки, как если бы значение было изменено в каждой ячейке.

  editor.field('to_date').input().on( 'change', function (e,d) {

    console.log("to_date event fired")
  });

Вот как я создал свою таблицу

editor = new $.fn.dataTable.Editor( {
          data: data,
          table: "#adSets",
          fields: [ {
                  name: "interest_id"
              },{
                  name: "interest_fb_id"
              },{
                  name: "adset_name"
              }, {
                  name: "budget"
              }, {
                  name: "duration",
                  type:  "select",
                  options: [
                    { label: 'Daily', value: 'Daily' },
                    { label: 'Lifetime', value: 'Lifetime' }
                  ]   
              }, {
                  type: "datetime",
                  name: "from_date",
                  readonly: true,
                  format: 'MM-DD-YYYY hh:mm A'
              }, {
                  type: "datetime",
                  name: "to_date",
                  readonly: true,
                  format: 'MM-DD-YYYY hh:mm A'
              }
          ]
      } );

  adSetsTable = $('#adSets').DataTable( {
      data: data,
      bPaginate: false,
      bFilter: false,
      bInfo: false,
      columnDefs: [
        {
            targets: [ 0, 1 ],
            visible: false
        }
      ],
      columns: [
          { title: "Interest Id", data: "interest_id", className: 'text-left'},
          { title: "Interest Fb Id", data: "interest_fb_id", className: 'text-left'},
          { title: "Adset Name", data: "adset_name", className: 'text-left'},
          { title: "Budget", data: "budget", className: 'text-right', render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
          { title: "Duration", data: "duration", className: 'text-right'},
          { title: "Start Date", data: "from_date", className: 'text-right'},
          { title: "End Date", data: "to_date", className: 'text-right' }
      ]
  } );

      editor.field('from_date').disable();
      editor.field('to_date').disable();

      // Activate an inline edit on click of a table cell
      $('#adSets').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        });

      });

Я не уверен, что, может быть, я ошибся?

Вот видео, показывающее проблему на тот случай, если кто-то захочет взглянуть.https://streamable.com/s9fzm

Он автоматически теряет режим редактирования, потому что onChange запускается, и я звоню adSetsTable.rows().invalidate().draw();

Answer 1

Похоже, что событие изменения срабатывает после щелчка в намеченной функциональности в соответствии с этой цепочкой

Только что решил.

Изменено событие, которое я слушаюсобытие размытия, поскольку моя проблема была предполагаемой функциональностью.

Изменено:

.input().on( 'change', function (e,d) {

Кому:

.input().on( 'blur', function (e,d) {

Измененное значение фиксируется после того, как пользователь покидает ввод, такэто отлично работает для моего сценария.

Если вы просто используете текстовые вводы, вы можете использовать событие keydown, однако у меня были выпадающие и входные данные для выбора даты, которые не вызывали бы событие keydown, поэтому япришлось использовать событие blur.

Answer 2

Проблема сохраняется даже при использовании функций редактирования, включенных в библиотеку Datatables?Похоже, что редактирование ячеек можно выполнить с помощью функции cell (). Edit (), как описано в документации здесь:

https://datatables.net/reference/api/cell().edit()

Надеюсь, это поможет!