Handsontable: jquery unisce intestazioni, bug a scorrimento orizzontale

Question

Attualmente sto lavorando con handsontable e python + django, ho inserito un'intestazione unita con Javascript. E questo dovrebbe assomigliare a questo.

Ma quando carico la pagina.

Ma, quando ho scorrere indietro e in avanti l'errore scompare magicamente.

Questo è il div contenitore.

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

Questo è il mio codice 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(); 
    }  
}); 

}

Answer 1

Credo di sapere che cosa c'è che non va. Rimuovere il afterRender e si dovrebbe risolvere da solo. Il problema è che stai provando a modificare l'html sulla tabella che rende Handson, che è sempre una cattiva idea. Handson verrà ri-renderizzato abbastanza frequentemente, come quando si scorre o si fa clic, il che significa che la linea è piuttosto inutile dopo pochi secondi di utilizzo del tavolo.