Handsontable：jquery 合并标题，水平滚动错误

Posted 2023-02-24

【中文标题】Handsontable：jquery 合并标题，水平滚动错误

【英文标题】：Handsontable: jquery merge headers, bug at horizontal scroll

【发布时间】：2015-11-20 15:22:56

【问题描述】：

我目前正在使用handsontable 和python+django，我将自定义合并标题与javascript。这应该是这样的。

但是当我加载页面时。

但是，当我向后滚动并向前滚动时，错误会神奇地消失。

这是容器 div。

<div class="table-container" style="width: auto; height: 200px; overflow: hidden;margin-top: 20px;">
                                <div id="table-index"  data-productoscomerciales='productoscomerciales'></div>
                          </div>

这是我的 javascript 代码。

function createTable(data, container)     

var str = '<tr id="header-grouping">'+'<th colspan="1"></th>'+'<th colspan="1"></th>'+'<th colspan="1"></th>'+'<th colspan="15">Inventario*</th>' + 
          '<th colspan="9">Producción*</th>'+'</tr>';  

return new Handsontable(container, 
  data: data.slice(2,data.length),
  minSpareRows: 1,
  rowHeaders: false,
  manualColumnResize: true,

  colHeaders: data[0],
  columns: data[1],

  colWidths: [150, 100, 130],
  contextMenu: false,
  afterRender  : function () $('.htCore > thead > tr').before(str);,
  beforeRender: function() 
        while ($('#header-grouping').size() > 0)
                $('#header-grouping').remove();
    ,
    afterColumnResize: function () 
        $container.handsontable('render');
    ,
      afterGetColHeader: function() 
        while ($('.ht_clone_top.handsontable #header-grouping th').size() > 0)
           $('.ht_clone_top.handsontable #header-grouping th').remove();
        
);

【问题讨论】：

你在使用什么特殊的css文件吗？

您好 ZakeDrioid，实际上我正在为表格使用默认的可动手操作 CSS。 handsontable.com/bower_components/handsontable/dist/…

【参考方案1】：

我想我知道出了什么问题。删除afterRender，它应该会自行修复。您遇到的问题是您正在尝试修改 Handson 呈现的桌子上的 html，这总是一个坏主意。 Handson 会相当频繁地重新渲染，例如当您滚动或单击时，这意味着在使用表格几秒钟后，该行将毫无用处。