HandsOnTable：动态更改单元格边框

Question

我正在尝试使用 HandsOnTable 制作类似 Excel 的编辑器，但我还没有弄清楚如何动态更改单元格的样式，在这种情况下为边框。

我试过用

setCellMeta(row,col,"borders", My_borders_Object); 

然后

MyHotInstance.render();

但这没有任何效果。

我能做些什么来解决这个问题？

任何帮助将不胜感激。

Answer 1

实际上，我现在正在尝试完成同样的工作。我尝试了以下方法：

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 中解决此问题。

在考虑了 handontable.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 将它们添加到您的表格中或编写执行相同操作的自定义代码。

Answer 2

不确定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
})