Реализация функций копирования и вставки для одной строки, исключая номера строк - PullRequest
Новая
       17

Реализация функций копирования и вставки для одной строки, исключая номера строк

0 голосов
/ 26 мая 2020

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

Проблема:

При попытке скопировать и вставить строку в таблицу, когда столбец с номером строки активен, обратный вызов clipboardCopied запускается со строкой, выводимой в консоль. Однако, когда я пытаюсь вставить данные с помощью Ctrl-v, обратные вызовы не запускаются и данные не вставляются.

И наоборот, при копировании данных без активного столбца номера строки (закомментированного) обратный вызов clipboardCopied не запускается, и обратный вызов clipboardPasted запускается без ошибок. Затем данные вставляются в новую строку, как и предполагалось.

В идеале я хотел бы иметь возможность вставлять с активными и отображаемыми столбцами с номерами строк, потому что в настоящее время я использую свойство css в этом столбце, чтобы указать пользователю, что изменения были сделаны и должны быть отправлены обратно на сервер с помощью реализованной мной кнопки сохранения изменений. Любая помощь или направление будут очень благодарны.

Соответствующая документация, которую я нашел:

http://tabulator.info/docs/4.6/clipboard

http://tabulator.info/docs/4.6/callbacks#clipboard

new Tabulator('#div-id', {
    height: '92%',
    addRowPos: 'top',
    clipboard: true,
    clipboardCopyRowRange: 'selected',
    clipboardPasteParser: function (clipboard) {
      var arry = clipboard.split('\t');
      var obj = { id: 'new', title: arry[1], branch: arry[2], os: arry[3], version: arry[4] };
      var pasteArr = [];
      pasteArr.push(obj);
      return pasteArr;
    },
    selectable: 1,
    data: tabledata,
    layout: 'fitColumns',
    columns: [
      {
        title: '#',
        field: 'id',
        width: 50
      },
      {
        title: 'Enpoint',
        field: 'title',
        width: 400,
        editor: 'input',
        formatter: 'plaintext',
        headerFilter: 'select',
        headerFilterParams: {
          values: true,
          sortValuesList: 'asc'
        },
        headerFilterFunc: '='
      },
      {
        title: 'Branch',
        field: 'branch',
        hozAlign: 'left',
        formatter: 'plaintext',
        headerFilter: 'select',
        editor: 'select',
        editorParams: branchParams,
        headerFilterParams: {
          values: true,
          sortValuesList: 'asc'
        },
        headerFilterFunc: '='
      },
      {
        title: 'Operating System',
        field: 'os',
        formatter: 'plaintext',
        editor: 'select',
        editorParams: osParams,
        headerFilter: 'select',
        headerFilterParams: {
          values: true,
          sortValuesList: 'asc'
        },
        headerFilterFunc: '='
      },
      {
        title: 'Version',
        field: 'version',
        hozAlign: 'center',
        editor: 'input',
        editorParams: {
          elementAttributes: { style: 'padding: 4px; text-align: center; width: 100%; height: 100%; box-sizing: border-box;' }
        },
        formatter: 'plaintext',
        headerFilter: 'select',
        headerFilterParams: {
          values: true,
          sortValuesList: 'asc'
        }
      }
    ],
    cellEdited: function (cell) {
      var originalSet = new Set(originalDataSet.map(j => {
        return {
          id: j.Id,
          title: j.Title,
          branch: customIdforField,
          os: customIdforField,
          version: j.Version
        };
      }).map(i => JSON.stringify(i)));
      var data = cell.getRow().getTable().getData().map(i => JSON.stringify(i));
      dataQueue = data.filter(x => { return !originalSet.has(x); });
      dataQueue = dataQueue.map(i => { return JSON.parse(i); }).map(l => {
        return {
          Id: l.id || 'new',
          Title: l.title,
          BranchId: customIdforField,
          OSId: customIdforField,
          Version: l.version
        };
      });
      var obj = {
        Id: cell.getRow().getData().id || 'new',
        Title: cell.getRow().getData().title,
        BranchId:customIdforField,
        OSId: customIdforField,
        EP_Version: cell.getRow().getData().version
      };
      obj = JSON.stringify(obj);
      queue = dataStorage.map(i => JSON.stringify(i));
      if (queue.indexOf(obj) > -1) {
        cell.getRow().getCells()[0].getElement().style.backgroundColor = '#ffc64d';
      } else {
        cell.getRow().getCells()[0].getElement().style.backgroundColor = '';
      }
    },
    clipboardCopied: function (clipboard) { console.log(clipboard); },
    clipboardPasted: function (clipboard, rowData, rows) { console.log(rowData); },
    clipboardPasteError: function (clipboard) {
      console.log(clipboard);
    }
  });
...