HandsOnTable:动态更改单元格边界
我正在尝试用HandsOnTable制作一个类似Excel的编辑器，但我还没有想出如何动态改变单元格的样式，在本例中就是边框。
我试着用
setCellMeta(row,col,"borders", My_borders_Object); 然后
MyHotInstance.render();但这并没有什么效果。
我能做些什么来解决这个问题？
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2015-09-07 00:52:42
不确定边框是什么，也不知道为什么要将“my_borders_object”作为单元格元数据参数传递，但这里有一个很好的方法：
有一个名为customBorders的初始化选项；请参阅下面的文档摘录：
customBorders：Boolean (默认false)
customBorders：Array [{ row: 2, col: 2, left: {width:2, color: 'red'}, right: {width:1, color: 'green'}, top: /*...*/, bottom: /*...*/ }]
customBorders：Array [{ range:{ from:{ row: 1, col: 1 }, to:{ row: 3, col: 4 } }, left: { /*...*/ }, right: { /*...*/ }, top: { /*...*/ }, bottom: { /*...*/ } }]如果为true，则启用自定义边框插件，该插件允许通过上下文菜单(可使用上下文菜单键边框配置)应用自定义边框。要使用预定义的自定义边框初始化Handsontable，请以数组的形式提供单元格坐标和边框样式。有关示例，请参阅自定义边框演示。添加的版本: 0.11.0
这意味着在任何给定的点上，如果您想要动态更新边框，您可以使用
hotInstance.updateSettings({
customBorders: new_borders_array
})Stack Overflow用户
发布于 2015-09-16 22:13:37
实际上，我现在也在尝试实现同样的目标。我尝试过以下几种方法：
ht是可处理的实例
ht.updateSettings({
customBorders: [
{ range:
{
from: { row: 1, col: 15 },
to: { row: 1, col: 16 }
},
top: { width: 3, color: 'red' },
left: { width: 2, color: 'red' },
bottom: { width: 2, color: 'red' },
right: { width: 2, color: 'red' }
},
]
});如果没有ht.init()，它将无法工作：
ht.init();在0.17版本中，这可以很好地工作，但是在0.18版本的ht.init()中更新之后，它在当前表的下面创建了另一个实例-非常令人沮丧。
所以现在我又被卡住了，否则我会降级到0.17，直到0.18修复为止。
在研究了handsontable.full.js之后，我设法从代码中提取了一些函数并构建了边框对象：
var container = document.getElementById('ht_container');
var data = function () {
return Handsontable.helper.createSpreadsheetData(20, 12);
};
var hot = new Handsontable(container, {
data: data(),
height: 396,
colHeaders: true,
rowHeaders: true,
stretchH: 'all',
customBorders: true,
});
//get handsontable instance
var instance = hot;
//copy required functions from the JS.... not pretty, but easy enough
//instead of building the required objects manually
var getSettingIndex = function(className) {
for (var i = 0; i < instance.view.wt.selections.length; i++) {
if (instance.view.wt.selections[i].settings.className == className) {
return i;
}
}
return -1;
};
var insertBorderIntoSettings = function(border) {
var coordinates = {
row: border.row,
col: border.col
};
var selection = new WalkontableSelection(border, new WalkontableCellRange(coordinates, coordinates, coordinates));
var index = getSettingIndex(border.className);
if (index >= 0) {
instance.view.wt.selections[index] = selection;
} else {
instance.view.wt.selections.push(selection);
}
};
var createClassName = function(row, col) {
return "border_row" + row + "col" + col;
};
var createDefaultCustomBorder = function() {
return {
width: 1,
color: '#000'
};
};
var createSingleEmptyBorder = function() {
return {hide: true};
};
var createDefaultHtBorder = function() {
return {
width: 1,
color: '#000',
cornerVisible: false
};
};
var createEmptyBorders = function(row, col) {
return {
className: createClassName(row, col),
border: createDefaultHtBorder(),
row: row,
col: col,
top: createSingleEmptyBorder(),
right: createSingleEmptyBorder(),
bottom: createSingleEmptyBorder(),
left: createSingleEmptyBorder()
};
};
var prepareBorderFromCustomAddedRange = function(rowObj) {
var range = rowObj.range;
for (var row = range.from.row; row <= range.to.row; row++) {
for (var col = range.from.col; col <= range.to.col; col++) {
var border = createEmptyBorders(row, col);
var add = 0;
if (row == range.from.row) {
add++;
if (rowObj.hasOwnProperty('top')) {
border.top = rowObj.top;
}
}
if (row == range.to.row) {
add++;
if (rowObj.hasOwnProperty('bottom')) {
border.bottom = rowObj.bottom;
}
}
if (col == range.from.col) {
add++;
if (rowObj.hasOwnProperty('left')) {
border.left = rowObj.left;
}
}
if (col == range.to.col) {
add++;
if (rowObj.hasOwnProperty('right')) {
border.right = rowObj.right;
}
}
if (add > 0) {
this.setCellMeta(row, col, 'borders', border);
insertBorderIntoSettings(border);
}
}
}
};
$(document).ready(function () {
//create my borders object
var customBorders = [
{ range:
{
from: { row: 1, col: 2 },
to: { row: 4, col: 4 }
},
top: { width: 3, color: 'red' },
left: { width: 2, color: 'red' },
bottom: { width: 2, color: 'red' },
right: { width: 2, color: 'red' }
},
];
//used the 'stolen' functions to add them to the HT in
prepareBorderFromCustomAddedRange.call(instance, customBorders[0]);
instance.render();
instance.view.wt.draw(true);
instance.customBorders = customBorders;
});</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}<div id="ht_container"></div>
但是如果你不懒惰，你可以构建相当多的构建你的“边框”对象，并使用，insertBorderIntoSettings将它们添加到你的表中，或者编写自定义代码来做同样的事情。
https://stackoverflow.com/questions/32421277
复制相似问题
腾讯云开发者
