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

Question

我想从 1 个单细胞开始做一个手工table。然后我们可以通过上下文菜单 add/remove rows/columns，甚至 copy-paste 来自 Excel 文件的数据。我将最大尺寸固定为 104 x 66。所以如果数据多的话，handsontable会有滚动条。

现在，我想在 table 周围添加边框，适用于所有情况：1) 当 table 未达到其最大尺寸时，边框应仅围绕单元格； 2) 当 table 达到其最大尺寸时，边框应位于最大尺寸附近。我做了这个 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

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

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

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..）

注意我在创建后加载数据table触发事件afterLoadData.

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

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

中找到一个有效示例

编辑 1："Scrollbars issue"

的屏幕截图

即使 2x2 单元格适合 table，滚动条也存在。

Answer 3

我添加了一些内容并发布在 JSBin 中。对于 dom 相关查询，我已将 css 和 jquery 添加到您原来的 html 中。请让我知道它是否有帮助。这是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');
}


}
});
});

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

Add borders around a flexible handsontable

css

handsontable