如何在handsontable的上下文菜單中添加具有默認項目的自定義項目

Question

我嘗試使用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"
};

菜單看起來像這樣。

問題1：

有沒有辦法添加所有默認菜單項的自定義項？ 如果是這樣，我不需要問題3和問題4的答案。

問題2：

讓我問這個問題最重要的部分是自定義菜單，即“set_color”。 單擊“黑色”或“紅色”后，它會變成該顏色，但在我更改單元格的值后，它會返回。 如何防止細胞變回背景顏色？

問題3：

除了啟用所有功能外，我還想要其他自定義項 但我找不到“合並”項目的正確鍵。 當前的“合並”功能非常奇怪。 如何使功能正常工作？

問題4：

我嘗試了https://github.com/handsontable/handsontable/issues/2853來實現粘貼功能，但我看到了這個錯誤。

Uncaught TypeError: Cannot read property 'triggerPaste' of undefined

請幫助我掌握這些用法。 提前致謝。

Answer 1

問題1：

有沒有辦法添加所有默認菜單項的自定義項？ 如果是這樣，我不需要問題3和問題4的答案。

在contextMenu設置為true初始化Handsontable 。 例：

  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/附帶“清除剪貼板”功能。