Question

是否有任何相对简单的方法可以让自动填充功能在单元格上方弹出时不会在其下方显示？

如果可能的话，我宁愿不修改handsontable.js或引入新的包。

现在使用z-index我可以强制它显示在我的页脚上，但我仍然希望它只是上升而不是下降。

我查看了https://github.com/trebuchetty/Handsontable-select2-editor，但我真的不想推出新的软件包。

Answer 1

有一种方法可以在没有包的情况下完成，但这意味着想出一些有趣的jquery逻辑。你想要做的是以下几点：

使用选择器.height()在下拉列表中添加一个计算其高度的事件，并将其添加到当前位置。如果此新值大于表格的底线，则它会溢出，因此您需要通过计算新位置并设置它来将其向上移动。

这是有趣的部分。要做到这一点，您需要考虑HTML坐标。您有下拉列表的左上角位置及其高度。要将其置于单元格上方，新位置将为dropPosition + dropHeight + cellHeight。现在，这是第一次渲染时一切正常，但是当你滚动时，它会变得很糟糕。

我还没写过这篇文章，但我将来可能会这样做。如果你开始小提琴，我们可以分叉并尝试找出更具体的解决方案。

Answer 2

感谢ZekeDroid的建议！这就是我提出的：

$scope.htSettings.afterOnCellMouseDown = function (event) {
   if(event.realTarget.className.indexOf('htAutocompleteArrow') >= 0) {
       orientDropdown();
   }
};

$scope.htSettings.beforeKeyDown = function () {
   if ($("td.current").attr("class").indexOf('htAutocomplete') >= 0) {
       orientDropdown();
   }
};

orientDropdown = function () {
   $(".autocompleteEditor").css("visibility", "hidden"); //Hide dropdown until ready to display to prevent flicker as orientation is adjusted

   setTimeout(function () { //Give dropdown time to load so we can access height etc.
       var tableBottom = $("body").outerHeight();   //I originally used $(".wtHolder").offset().top + $(".wtHolder").height() for table edge

       if ($(".autocompleteEditor").length) {
           var dropdownBottom = $(".autocompleteEditor").offset().top + $(".autocompleteEditor").outerHeight();
           var dropdownInverted = $(".autocompleteEditor").offset().top + 2 * $(".autocompleteEditor").outerHeight() + $("td").outerHeight();
           var dropdownOverflowed = $(".autocompleteEditor").css("position") === 'fixed' && dropdownBottom > tableBottom;
           var keepDropdownSetting = $(".autocompleteEditor").css("position") === 'relative' && dropdownInverted > tableBottom;
           if (dropdownOverflowed || keepDropdownSetting) {
               var optionsHeight = -($("td").outerHeight() + $(".autocompleteEditor").outerHeight());
               $(".autocompleteEditor").css("position", "relative");
               $(".autocompleteEditor").css("top", optionsHeight);
           } else {
               $(".autocompleteEditor").css("position", "fixed");
               $(".autocompleteEditor").css("top", "");
           }
       }
       $(".autocompleteEditor").css("visibility", "visible");
   }, 80);
};

手持式自动完成弹出/显示在单元格上方

2 个答案: