Javascript 如何在handsontable的上下文菜单中添加带有默认项的自定义项
我尝试使用handsontable,并希望将自定义项添加到上下文菜单中 有许多教程可以实现自定义菜单,但它忽略了默认项 所以我添加了所有项目的键,但其中一些不起作用 我的设置如下Javascript 如何在handsontable的上下文菜单中添加带有默认项的自定义项,javascript,jquery,handsontable,Javascript,Jquery,Handsontable,我尝试使用handsontable,并希望将自定义项添加到上下文菜单中 有许多教程可以实现自定义菜单,但它忽略了默认项 所以我添加了所有项目的键,但其中一些不起作用 我的设置如下 var basicSettings = { minRows: 1, minCols: 1, rowHeaders: false, colHeaders: false, hiddenColumns: true, contextMenu: { items: {
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"
};
var基本设置={
麻雀:1,
明科尔斯:1,
行标题:false,
colHeaders:false,
希登:是的,
上下文菜单:{
项目:{
上面第u行:{},
下面第u行:{},
“hsep1”:“-----------”,
左列:{},
列右:{},
“hsep2”:“-----------”,
删除_行:{},
删除_列:{},
“hsep3”:“-----------”,
撤消:{},
重做:{},
“hsep4”:“-----------”,
使_只读:{},
“hsep5”:“-----------”,
对齐:{},
“hsep6”:“-----------”,
副本:{},
切:{},
“粘贴”:{
名称:“粘贴”,
回调:函数(键、选项){
这个.copyplaste.triggerplaste();
}
},
“hsep7”:“-----------”,
合并单元格:{
名称:“合并”
},
“hsep8”:“-----------”,
//用于设置单元格颜色的自定义菜单项
设置颜色:{
键:“颜色”,
名称:“颜色”,
“子菜单”:{
“项目”:[
{
键:“颜色:1”,
“名称”:“黑色”,
回调:函数(键、选项){
对于(var i=options[0]。start.row;对于问题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:
让我问这个问题的最重要部分是定制菜单,
即“设置颜色”。单击“黑色”或“红色”后,它变为
那个颜色,但当我改变一个单元格的值后,它会变回原来的颜色
我能阻止细胞把背景颜色转回来吗
我不知道如何防止这种情况;但是,这里有一种方法可以恢复相应单元格的颜色(或任何其他自定义/元数据…)
// 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);
添加必要的变量:
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);
}
}
})
}
});
更多关于和演示的详细信息-或带有“清除剪贴板”功能的选项。太好了!+1。您的答案非常棒,特别是问题1的答案。但我希望进一步的答案能够实现“粘贴”功能。因此,我将等待您的答案被标记为已接受。谢谢。感谢+1!请检查更新的答案。=)太棒了。如果可以的话,我想给+10。谢谢你的精彩回答!!!有可能改变背景颜色和颜色一样吗?@SudhakarAyyar,是的,有可能。检查并尝试。
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);
}
}
})
}
});