在灵活的手摇桌周围添加边框

Question

我想从 1 个单元格开始制作一个动手操作。然后我们可以通过上下文菜单添加/删除行/列，甚至可以从 Excel 文件中复制粘贴数据。我将最大尺寸固定为104 x 66。所以如果有很多数据，handsontable就会滚动。

现在，我想在表格周围添加边框，适用于所有情况：1）当表格没有达到其最大尺寸时，边框应该正好在单元格周围； 2）当表格达到最大尺寸时，边框应该在最大尺寸附近。我做了这个JSBin，它满足第二种情况，但不是第一种：

<!DOCTYPE html>
<html>
<head>
  <script src="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
  <style>
    .handsontable { border: 1px solid red; }
  </style>
</head>
<body>
  <div id="example4" class="hot head-gap handsontable htRowHeaders htColumnHeaders"></div>
</body>
</html>

JavaScript：

document.addEventListener("DOMContentLoaded", function() {
  function getData() {
    return [
      [""]
    ];
  }

  var
    example4 = document.getElementById('example4'),
    hot4;

  hot4 = new Handsontable(example4, {
    data: getData(),
    width: 104,
    height: 66,
    colWidths: 47,
    rowHeights: 23,
    rowHeaders: false,
    colHeaders: false,
    contextMenu: true,
    contextMenuCopyPaste: {
      swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
    }
  });
});

有人有解决办法吗？

编辑 1： 遵循 Serg Chernata 的回答：

编辑 2： 按照 fap 的回答，我看到两个问题：

1) 红色边框甚至在上下文菜单周围：

2) 红色边框在数据的蓝色边框之外：

Answer 1

假设我正确理解了您的要求，我们或许可以用一点 css 来做到这一点：

#example4{
  max-width: 104px;
  max-height: 66px;
  display: inline-block;
}

注意，我从您的 dandsontable 配置中删除了宽度和高度。通过这种方式，我们可以将内容扩展到某个定义的max-width 和max-height。

http://jsbin.com/qehexiyidu/edit?html,css,js,output

Answer 2

我相信，我有一个解决方案可以通过使用 after create/remove col/row 事件来满足您的所有要求，但它并不完美。

我所做的是在其中一个事件之后动态更改表格的宽度和高度，例如：

hot4.addHook('afterCreateCol', function() {
  setTable();
});

如果其中一个或两个值超过限制，它们将保持在此限制。 （在您的示例中为 104 x 66）

所以主要功能是：

function setTable() {
  if(hot4.getColWidth()*hot4.countCols()<208)
    hot4.updateSettings({
      width: hot4.getColWidth()*hot4.countCols()
    });
  else
    hot4.updateSettings({
      width: 208
    });

  if(hot4.getRowHeight()*hot4.countRows()<132)
    hot4.updateSettings({
      height: hot4.getRowHeight()*hot4.countRows()
    });
  else
    hot4.updateSettings({
      height: 132
    });
}

（我的眼睛用的是 208 x 132..）

注意我是在创建表之后加载数据来触发事件afterLoadData。

唯一剩下的“问题”（我说它并不完美..）将是滚动条。我不知道为什么，但即使数据适合，滚动条也会出现在限制之下。 It's supposed to be fixed，但显然不是......（如果你能解决这个问题，我很感兴趣）

无论如何，我认为从这个解决方案开始，你可能会成功地达到你想要的，所以我决定与你分享它的当前状态。您可以在 JSBin 中找到一个工作示例。

---

编辑 1：“滚动条问题”的屏幕截图

即使 2x2 单元格适合表格，滚动条仍然存在。

Answer 3

我添加了一些东西并发布在JSBin。我已添加 css 并将 jquery 包含到您的原始 html 中以进行与 dom 相关的查询。请让我知道它是否有帮助。这是JS代码。

document.addEventListener("DOMContentLoaded", function() {
function getData() {
return [
  [""]
];
}

var
example4 = document.getElementById('example4'),
hot4;

hot4 = new Handsontable(example4, {
data: getData(),
width: 104,
height: 66,
colWidths: 47,
rowHeights: 23,
rowHeaders: false,
colHeaders: false,
contextMenu: true,
contextMenuCopyPaste: {
  swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
},
afterRender: function() {
  var item = $('.ht_master.handsontable .wtHolder')[0];
if (item.scrollHeight > item.clientHeight || item.scrollWidth > item.clientWidth) {
    $('.handsontable').css('border', '1px solid red');
    $(item).find('.htCore').css('border', '0px none white');
} else {
    $(item).find('.htCore').css('border', '1px solid red');
}


}
});
});