动态调整包含 Handsontable 的容器的大小

Posted 2023-03-22

【中文标题】动态调整包含 Handsontable 的容器的大小

【英文标题】：Dynamically resizing a container containing a Handsontable

【发布时间】：2015-09-24 22:18:35

【问题描述】：

这是我得到的 html：

<div class="preview-content">
    <h1 class="preview-content-header">Vorschau - Notiz1.txt <img src="icons/cross.png" /></h2>
    <div>
      <h2>Notiz1.txt</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>

  <img id="preview-toggle" src="icons/preview.png">

  <div class="main-content">
    <h2 class="main-content-header">Datenbank</h2>
    <div id="table">
    </div>
  </div>

这是对应的 CSS：

/* General Style */
html, body 
  margin: 0px;
  padding: 0px;
  background: $background-color;
  font-family: $font;
  overflow-x: hidden;


/* Main Content */
div.main-content 
  padding: 50px 0px 20px 70px;
  width: 45%;
  overflow: auto;

  h2.main-content-header 
    margin: 0;
  


#preview-toggle 
  display: none ;
  position: fixed;
  z-index: 3;
  top: 50px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: $nav-color;
  color: $font-color-secondary;
  cursor: pointer;
  transition: .3s background-color;
  -webkit-transition: .3s background-color;


#preview-toggle:hover 
  background-color: $main-color;


/* Preview */
div.preview-content 
  position: fixed;
  z-index: 3;
  right: 0px;
  margin: 0;
  width: 50%;
  height: 100%;
  font-size: 70%;

  img 
    float: right;
    height: 25px;
    padding: 0px 15px 0px 0px;
    cursor: pointer;
  

  h1 
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0;
    padding: 5px 5px 5px 10px;
    background-color: $preview-header-color;
    color: $font-color-secondary;
    white-space: nowrap;
  

  div 
    position: fixed;
    z-index: 3;
    height: 100%;
    margin: 0;
    padding: 10px;
    background-color: $data-background-color;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-line;
    word-wrap: break-word;

  


/* Database table */

#table 
  z-index: 1;

这是打开/关闭预览容器的动画：

$(document).ready(function() 
  $(' .preview-content-header img').click(function() 
    $('.main-content').animate(
      width: "100%"
    );
    $('.preview-content').animate(
      width: "0%"
    , 300, function() 
      $('#preview-toggle').toggle();
    );
    $('.preview-content img').toggle();
  );

  $('#preview-toggle').click(function() 
    $('.main-content').animate(
      width: "45%"
    );
    $('#preview-toggle').toggle();
    $('.preview-content').animate(
      width: "50%"
    , 300, function() 
      $('.preview-content img').toggle();
    );
  );
);

这是 Handsontable 的代码：

$(document).ready(function() 
  var data = [
    ["Dateiname", "Benutzer", "Erstelldatum", "Änderungsdatum", "Erste Zeile", "Kategorie", "Projekt"],
    ["Rechnung1.doc", "SB", "01.01.2010", "-", "Internetrechnung", "Rechnungen", "Haushalt"],
    ["Rechnung2.doc", "SB", "01.01.2012", "-", "Stromrechnung", "Rechnungen", "Haushalt"]
  ];

  var container = $('#table');

  container.handsontable(
    data: data,
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
  );
);

场景如下：

我有一个.main-content，它占据了整个窗口，其中包含一个 Handsontable 和一个 .preview-content，只要您单击 .main-content 中的切换按钮，它就会扩展它的宽度并显示内容。 .preview-content 是固定的，不会与 .main-content 一起滚动。

问题是当显示网站的屏幕不够大时，.preview-content 将覆盖.main-content 内的部分 Handsontable。 为了防止这种情况发生，我想动态更改包含 Handsontable 的容器的宽度和高度，以便在表格被部分覆盖时获得滚动条。

到目前为止，我已经尝试了很多东西，但似乎没有任何效果。而且似乎 Handsontable 只喜欢其宽度和高度的绝对像素尺寸，否则 overflow: hidden 似乎不起作用。

我尝试将 .main-content 的宽度从 100% 更改为 45%，并将 overflow: auto 添加到 .main-content，正如您在代码中看到的那样，但这不起作用，因为它的行为非常奇怪。

也许有人知道如何动态更改 Handsontable 的宽度？

非常感谢您的帮助。如果您需要更多信息来帮助我，请直接说出来，我会看看能否提供正确的信息。

【问题讨论】：

你能把答案标记为正确吗？

【参考方案1】：

要动态更改 Handsontable 实例的宽度，您可以这样做：

hotInstance.updateSettings(
    width: newWidth
);

尝试一下，因为这应该可以解决自己手动设置 .main-content 宽度的 CSS 陷阱。

【讨论】：

谢谢，我会试试的

另外一个问题：container 变量是否会变成带有.handsontable() 的实例？

是的，但我建议在初始化 Handsontable 时设置实例变量，因为所有文档都是用该符号编写的，它会让您更容易遵循它

我现在设法动态更改表格的宽度。但是还有一个问题：只要我将overflow: hidden 添加到#table（这应该根据Handsontable 文档为表格创建滚动条），Handsontable 就会消失。你知道怎么解决吗？

显示的是overflow:auto，隐藏将隐藏它们。我认为他们在谈论的是本机滚动与容器滚动（一个滚动浏览器页面，另一个滚动带有 overflow:hidden 的 div）

【参考方案2】：

每当调整窗口大小时，使用HandsonTable.updateSettings() 和 jQuery 动态调整表格大小：

$(document).ready(function()
    $(window).resize(function()
        hotInstance.updateSettings(
            width: $('hotWrapperDiv').width()
        );
    );
);

【参考方案3】：

可以使用Handsontable的resize事件，在calculateSize函数中编写代码计算高宽

Handsontable.Dom.addEvent(window, 'resize', calculateSize);