可手持自定义页眉

Handsontable custom header

本文关键字：自定义      更新时间：2023-09-26

大家好。

我有一个任务：制作自定义标题，好吧，标题本身就是制作的，但我遇到了以下问题：

我有自定义的标题html字符串ie:

var str = "
<tr><th colspan='2'>global</th><tr>
<tr><th><img src='generateonflypath' /></th><th><img src='generateonflypath' /></th><tr>
"

当我这样应用它时：

$hotContainer.handsontable({
    afterRender: function () {$('.htCore > thead').html(str);}
});

我的HOT高度保持不变，在我点击任何单元格之前，最低的行都是看不见的。如何解决此问题？（之前的事件效果更差）

感谢您抽出时间！

经过几天的粗略实验，我得出了这个解决方案：

$container.handsontable({
    ...options...
    afterRender: function () { //add custom header
          $('.htCore > thead').html(jsonObj.Headers);
          //add container resize event handler for images that loaded in header
          $('.htCore > thead img').load(function(){
                 $('.wtHider').height($('.htCore').height()+10);
          });   
    } 
});

这背后的想法是改变HOT主表容器的高度。我认为其他人可以对其他事件做同样的事情，不仅加载img，还可以更改文本等…

希望这能帮助到别人！

实际上，您现在可以在>2.0版本中使用内置渲染器。

//options
columnHeads: (index, element) => {
  // return html
  return `<a href="/">Link</a>`;
}
相关文章：