Как добавить пользовательские элементы с элементами по умолчанию в контекстном меню handsontable - PullRequest
Новая
       9

Как добавить пользовательские элементы с элементами по умолчанию в контекстном меню handsontable

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

Я попытался использовать handsontable и хочу добавить пользовательские элементы в контекстное меню.

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

Поэтому я добавил ключииз всех пунктов, но некоторые из них не работают.

Моя настройка выглядит следующим образом. 

var basicSettings = {
    minRows: 1,
    minCols: 1,
    rowHeaders: false,
    colHeaders: false,
    hiddenColumns: true,
    contextMenu: {
        items: {
            row_above: {},
            row_below: {},
            "hsep1": "---------",
            col_left: {},
            col_right: {},
            "hsep2": "---------",
            remove_row: {},
            remove_col: {},
            "hsep3": "---------",
            undo: {},
            redo: {},
            "hsep4": "---------",
            make_read_only: {},
            "hsep5": "---------",
            alignment: {},
            "hsep6": "---------",
            copy: {},
            cut: {},
            "paste": {
                name: 'Paste',
                callback: function (key, option) {
                    this.copyPaste.triggerPaste();
                }
            },
            "hsep7": "---------",
            mergeCells: {
                name: "Merge"
            },
            "hsep8": "---------",
            // Custom menu item to set color of cells
            set_color: {
                key: "color",
                name: "Color",
                "submenu": {
                    "items": [
                        {
                            key: "color:1",
                            "name": "Black",
                            callback: function(key, options) {
                                for (var i = options[0].start.row; i <= options[0].end.row; i ++){
                                    for (var j = options[0].start.col; j <= options[0].end.col; j ++){
                                        this.getCell(i, j).className = "color-black";
                                    }
                                }
                            }
                        }, {
                            key: "color:2",
                            "name": "White",
                            callback: function(key, options) {
                                for (var i = options[0].start.row; i <= options[0].end.row; i ++){
                                    for (var j = options[0].start.col; j <= options[0].end.col; j ++){
                                        $(this.getCell(i, j)).removeClass("color-*").addClass("color-white");
                                    }
                                }
                                this.render();
                            }
                        }, {
                            key: "color:3",
                            "name": "Red",
                            callback: function(key, options) {
                                for (var i = options[0].start.row; i <= options[0].end.row; i ++){
                                    for (var j = options[0].start.col; j <= options[0].end.col; j ++){
                                        this.getCell(i, j).style.backgroundColor = "red";
                                    }
                                }
                                this.render();
                            }
                        }
                    ]
                }
            }
        }
    },
    manualRowResize: true,
    manualColumnResize: true,
    contextMenuCopyPaste: {
        swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
    },
    copyPaste: true,
    mergeCells: true,
    search: true,
    stretchH: 'all',
    autoColumnSize: {useHeaders: true},
    autoRowSize: {syncLimit: 300},
    width: 1000,
    height: window.innerHeight - 100,
    licenseKey: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx"
};

Меню выглядит следующим образом.

Current Menu

Вопрос 1:

Можно ли добавить пользовательский элемент со всеми элементами меню по умолчанию?Если это так, мне не нужны ответы на вопрос 3 и вопрос 4.

Вопрос 2:

Самая важная часть, которая позволяет мне задать этот вопрос, - это пользовательское меню, то есть set_color.,После нажатия «Черный» или «Красный», он превращается в этот цвет, но после того, как я изменяю значение ячейки, он возвращается.Как я могу предотвратить изменение цвета фона в ячейках?

Вопросы 3:

Мне нужен дополнительный пользовательский элемент помимо всех включенных функций.Но я не могу найти подходящий ключ для элемента "Слияние".Текущая функция «Слияние» работает так странно.Как заставить функцию работать правильно?

Вопрос 4:

Я пытался https://github.com/handsontable/handsontable/issues/2853 реализовать функцию вставки, но я вижу эту ошибку.

Uncaught TypeError: Cannot read property 'triggerPaste' of undefined

Пожалуйста, помогите мне с этим handsontable использования.Заранее спасибо.

1 Ответ

0 голосов
/ 28 мая 2018

Для вопроса 1:

Можно ли добавить пользовательский элемент со всеми пунктами меню по умолчанию?Если это так, мне не нужны ответы на вопрос 3 и вопрос 4.

Инициализируйте Handsontable с contextMenu, установленным в true.Пример: 
  let
    example3 = document.getElementById('example3'),
    settings3,
    hot3;

  settings3 = {
    data: [...],
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true // set to `true`..
  };
  hot3 = new Handsontable(example3, settings3);

Затем обновите настройку contextMenu следующим образом: 
  let cm = hot3.getPlugin('ContextMenu');
  hot3.updateSettings({
    contextMenu: {
        // Clone the pre-defined items and add your custom items.
      items: Object.assign({}, cm.itemsFactory.predefinedItems, {
        'hsep1': '---------',
        'set_color': {
            key: 'color',
            name: 'Color',
          submenu: {
            items: [{
              key: 'color:red',
              name: 'Red',
              callback: setCellColor
            }, {
              key: 'color:blue',
              name: 'Blue',
              callback: setCellColor
            }]
          }
        }
      })
    }
  });

Для вопроса 2:

Самая важная часть, которая позволяет мне задать этот вопрос, это пользовательское меню, то есть set_color.После нажатия «Черный» или «Красный», он превращается в этот цвет, но после того, как я изменяю значение ячейки, он возвращается.Как я могу помешать клеткам вернуть фоновый цвет?

Я не уверен, как предотвратить это;однако вот один из способов восстановить цвет (или любые другие пользовательские / метаданные ..) соответствующих ячеек. 

  // This is my callback for the 'set_color' context menu items.
  // Sample `key`: 'color:red'
  function setCellColor(key, opt) {
    let color = key.substring(6);
    for (let i = opt[0].start.row; i <= opt[0].end.row; i++) {
      for (let j = opt[0].start.col; j <= opt[0].end.col; j++) {
        this.getCell(i, j).style.color = color;
        this.setCellMeta(i, j, 'color', color); // Save the color
      }
    }
  }

  // Listen to the `beforeRenderer` event, and restore the cell's color
  // before the "renderer" starting rendering the cell
  Handsontable.hooks.add('beforeRenderer', function(td, r, c, p, pv, cp){
    if (cp.color) {
        td.style.color = cp.color;
    }
  }, hot3);

Демо

Попробуйте полностьюпример здесь: http://jsfiddle.net/y9j3m29c/1/, на основе https://docs.handsontable.com/3.0.0/demo-context-menu.html#page-custom

Для функции вставки:

Загрузка SheetClip(): 
<script src="https://unpkg.com/sheetclip"></script>

Добавьте необходимые переменные: 
let clipboardCache = '';
const sheetclip = new SheetClip();

Добавьте необходимые обратные вызовы: 
  settings3 = {
    ...
    afterCopy: function(changes){
        clipboardCache = sheetclip.stringify(changes);
    },
    afterCut: function(changes){
        clipboardCache = sheetclip.stringify(changes);
    },
    afterPaste: function(changes){
        clipboardCache = sheetclip.stringify(changes);
    }
  };

Добавить пункт контекстного меню: 
  let cm = hot3.getPlugin('ContextMenu');
  hot3.updateSettings({
    contextMenu: {
        // Clone the pre-defined items and add your custom items.
      items: Object.assign({}, cm.itemsFactory.predefinedItems, {
        ...
        'paste': {
            name: 'Paste',
          disabled: function(){
            return clipboardCache.length === 0;
          },
          callback: function(){
            var plugin = this.getPlugin('copyPaste');

            this.listen();
            plugin.paste(clipboardCache);
          }
        }
      })
    }
  });

Подробнее о https://docs.handsontable.com/3.0.0/demo-copy-paste.html#paste-in-context-menu и демонстрации поhttp://jsfiddle.net/y9j3m29c/2/ - или http://jsfiddle.net/y9j3m29c/4/ с функцией «Очистить буфер обмена».

...