0
我有一个颜色变化的例子已经发生。问题是改变新单元格,行或列的颜色会改变前一个单元格/行/列的颜色。之前的单元格应该保持原来的颜色,并且我需要用一个函数(而不是多个渲染器)动态地发生这种情况。小提琴中有3种颜色选项,但我实际上使用了一种具有数百个选项的颜色选择器。我该如何处理这种颜色变化(点击右键)?Handsontable使用颜色选择器更改单元格/行/列的颜色?
http://jsfiddle.net/anschwem/hkhk5zbo/17/
var data = [
['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
['2009', 0, 2941, 4303, 354, 5814],
['2010', 3, 2905, 2867, 412, 5284],
['2011', 4, 2517, 4822, 552, 6127],
['2012', 2, 2422, 5399, 776, 4151]
],
celldata = [],
container = document.getElementById('example'),
hot,
sentrow,
sentcol;
var colorRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = $('#color_field').val();
};
var settings = {
data: data,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
startRows: 5,
startCols: 5,
//columns: coldata,
cell: celldata,
cells: function (row, col, prop) {
if (row === sentrow) {
this.renderer = colorRenderer;
}
if (col === sentcol) {
this.renderer = colorRenderer;
}
},
};
hot = new Handsontable(example, settings);
hot.updateSettings({
contextMenu: {
callback: function (key, options) {
if (key === 'cellcolor') {
setTimeout(function() {
//timeout is used to make sure the menu collapsed before alert is shown
var row = hot.getSelected()[0];
var col = hot.getSelected()[1];
var item = {};
item.row = row;
item.col = col;
item.renderer = colorRenderer
celldata.push(item)
hot.updateSettings({cell: celldata});
hot.render();
}, 100);
}
if (key === 'rowcolor') {
setTimeout(function() {
//timeout is used to make sure the menu collapsed before alert is shown
var row = hot.getSelected()[0];
sentrow = row;
hot.render();
}, 100);
}
if (key === 'colcolor') {
setTimeout(function() {
//timeout is used to make sure the menu collapsed before alert is shown
var col = hot.getSelected()[1];
sentcol = col;
hot.render();
}, 100);
}
},
items: {
"cellcolor": {
name: 'Cell color'
},
"rowcolor": {
name: 'Row color'
},
"colcolor": {
name: 'Column color'
},
}
}
})
这工作很漂亮,但因为我使用的颜色选择器我存储功能之外的颜色。 http://jsfiddle.net/anschwem/0h6yqzw7/23/ – triplethreat77
更新了JSFiddle以反映这一点。您仍然可以通过将storedColor的值分配给colorValue来捕获封闭中所选颜色的值。 – McCroskey
我一直在努力,无论以前的颜色会不会改变(尽管它完美地适用于你的例子) - 超级沮丧。这很古怪,我不确定。这是我正在作为备用(http://jsfiddle.net/anschwem/9odsv02x/1/)的工作,并且单元格工作。行(在我的结尾)将取代以前的行颜色,我不知道为什么我必须长 - 1,否则它会添加一个额外的列。也许这是我<= settings.startCols? – triplethreat77