- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试使用 handsontable 并想将自定义项添加到上下文菜单。
实现自定义菜单的教程很多,但是忽略了默认项。
所以我添加了所有项目的 key ,但其中一些不起作用。
我的设置如下。
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"
};
菜单看起来像这样。
有什么方法可以在所有默认菜单项中添加自定义项吗?如果是这样,我不需要回答问题 3 和问题 4。
让我问这个问题的最重要的部分是自定义菜单,即“set_color”。单击“黑色”或“红色”后,它变成那种颜色,但在我更改单元格的值后,它又变回原来的颜色。如何防止单元格恢复其背景颜色?
除了启用所有功能外,我还想要其他自定义项。但是我找不到“合并”项目的正确 key 。当前的“合并”功能工作起来很奇怪。如何使功能正常运行?
我试过了 https://github.com/handsontable/handsontable/issues/2853实现粘贴功能,但我看到了这个错误。
未捕获的类型错误:无法读取未定义的属性“triggerPaste”
请帮助我了解那些可上手的用法。提前致谢。
最佳答案
Is there any way to add custom item with all the default menu items? If so, I don't need answers to Question 3 and Question 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
}]
}
}
})
}
});
The most important part that let me ask this question is custom menu, that is "set_color". After clicking "Black" or "Red", it turns into that color, but after I change value of a cell, it turns back. How can I prevent the cells from turning their background color back?
我不确定如何防止;但是,这里有一种方法可以恢复相应单元格的颜色(或任何其他自定义/元数据..)。
// 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/它带有“清除剪贴板”功能。
关于javascript - 如何在 handsontable 的上下文菜单中添加具有默认项目的自定义项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50538365/
出现以下错误 Network access for Distributed Transaction Manager (MSDTC) has been disabled. Please enable D
在调试应用程序时出现以下错误。 The CLR has been unable to transition from COM context 0x3b2d70 to COM context 0x3b2
在 GAE Go 中,为了记录,我们需要使用 appengine.NewContext(r) 创建一个新的上下文,它返回 context.Context。 如何使用此上下文在请求范围内设置/获取变量?
我想使用 Puppeteer 从放置在页面上 iframe 内的选择器中获取数据,该页面在与其父框架域不同的域上运行。因此,我不是任何域的所有者 - 无法使用 frame.postMessage。 试
我正在尝试获取可用的应用程序上下文并想切换到 webview 上下文,但 appium 仅获取 Navive App。 应用程序还启用了 WebView。 Appium 版本:1.10.1 Chrom
这个问题在这里已经有了答案: How to fix this nullOk error when using the flutter_svg package? (7 个回答) 7 个月前关闭。 当我尝
我观看了关于 Core Data 的 2016 WWDC 视频并查看了各种教程。我见过使用 Core Data Framework 创建对象以持久保存到 managedObjectContext 中的
这是代码 obj = { a: 'some value'; m: function(){ alert(this.a); } } obj.m(); 结果是'som
我正在尝试做类似的事情 $(".className").click(function() { $(this).(".anotherClass").css("z-index","1");
var User = { Name: "Some Name", Age: 26, Show: function() { alert("Age= "+this.Age)}; }; fun
我目前正在使用我见过的常见 Context 模式,它允许子组件通过传递修饰函数来更新父组件的状态(即 Provider)通过共享的 Context。 我遇到的问题是,修改函数只引用原始状态,不引用最新
有没有办法让 React Context类型安全与流类型? 例如: Button.contextTypes = { color: React.PropTypes.string }; 最佳答案 不幸
我想知道是否有一种方法可以为不同的功能使用不同的上下文类。 我希望有一个功能使用 MinkExtensions 进行浏览器测试,另一个功能使用和 HTTP 客户端(如 Guzzle)进行 API 测试
我有这个配置文件 apiVersion: v1 clusters: - cluster: server: [REDACTED] // IP of my cluster name: stag
我在实现非抢先式调度时遇到了用于初始化TCB的代码。 typedef struct TCB_t { struct TCB_t *next; struct TCB_t
我想将一个函数设置为数组中每个元素的属性,但使用不同的参数调用它。我想我会使用匿名函数来解决它: for ( var i = 0; i < object_count; i++ ) { obje
这个问题已经有答案了: How to access the correct `this` inside a callback (15 个回答) 已关闭 7 年前。 我正在做一些练习,但我在管道方法中丢
我正在尝试通过 Java 和 Android Studio 学习和制作 Android 应用程序。我对Java的了解程度是两年前几个小时的youtube学习和大学基础类(class)。不过我确实知道如
我在(这个)上遇到了问题。错误ImageView无法应用。我在 fragment 类中执行此代码。 ViewFlipper v_flipper; @Nullable @Override public
我想使用 openGL 的某些功能,但与渲染视觉内容无关。有没有办法在没有任何依赖性的情况下创建它(不是对 Windows,也不是某些包[SDL,SFML,GLUT])?只允许使用没有外部库的库,就像
我是一名优秀的程序员,十分优秀!