Question

我试图使用HandsOnTable创建一个类似Excel的编辑器，但我还没有想出如何在这种情况下动态更改单元格的样式。

我尝试过使用

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

然后

MyHotInstance.render();

但这没有效果。

我该怎么做才能解决这个问题？

非常感谢任何帮助。

Answer 1

不确定my_borders_object是什么或为什么你将“border”作为单元元数据参数传递，但这是一个很好的方法：

有一个名为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
})

Answer 2

我正在努力实现同样的目标。我尝试过以下方法：

ht是handontable实例

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后，我设法通过从代码中提取一些函数并构建border对象来实现：

  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>

但如果你不懒，你可以构建你的'border'对象并使用insertBorderIntoSettings将它们添加到你的表中或编写同样的自定义代码。

HandsOnTable：动态更改单元格边框

2 个答案: