Question

我想从1个单格开始制作一个指法。然后我们可以通过contexte菜单添加/删除行/列，甚至可以从Excel文件中复制粘贴数据。我将最大尺寸设为104 x 66。因此，如果有很多数据，那么handontable就会滚动。

现在，我希望在表格周围添加边框，对于所有情况：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 。

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

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

编辑1：＆＃34;滚动条问题＆＃34;

的屏幕截图

即使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');
}


}
});
});

在灵活的手势上添加边框

3 个答案: