handsontable distruggere e creare

Question

voglio distruggere e ricreare il mio foglio di excel sto usando Handsontable perché l'oggetto è sempre distrutto e creato nuovi, ma i dati all'interno della riga è lo stesso per nuova tabella come bene per vecchio

in quanto il titolo è simile a SO QUESTION ho implementato qual è stata la risposta precedente domanda così, ma io sono ancora bloccato
JSFIDDLE

 <div id="example1" class="hot handsontable"></div> 
    <select class="client_class"> 
    <option value="">Select client</option> 
    <option value="DEFGH">DEFGH</option> 
    </select> 


    var autosaveNotification; 
    var hotInstance; 
    var setting1 = { 
    data: [], 
    colHeaders: ['InvoiceNo', 'InvoiceDate', 'Supplier'], 
    columns: [{ 
     data: 'InvoiceNo' 
    }, { 
     data: 'InvoiceDate' 
    }, { 
     data: 'Supplier' 
    }], 
    rowHeaders: true, 
    minSpareRows: 1, 
    minRows: 5, 
    manualColumnResize: true, 
    manualRowResize: true, 
    fixedColumnsLeft: 1, 
    manualColumnMove: true, 
    manualRowMove: true, 
    }; 
    hotInstance = new Handsontable(jQuery("#example1")[0], setting1); 

    jQuery('.client_class').on('change', function() { 
    var selected = $(this).find("option:selected").val(); 
    console.log(hotInstance.getData()); 
    hotInstance.destroy(); 
    hotInstance = new Handsontable(jQuery("#example1")[0], setting1); 
    console.log(hotInstance.getData()); 
    }); 

Answer 1

presumo tua domanda è che si sta cercando di creare un nuova tabella con dati vuoti ma il tuo è non farlo. La semplice soluzione è che sulla penultima riga stai impostando la nuova istanza HOT per avere setting1 come il nuovo oggetto delle opzioni, dimenticando che gli oggetti in JS possono essere mutati, ovvero che setting1.data viene modificato a prescindere dalla tabella.

per ottenere quello che penso è il vostro comportamento previsto, reimpostare setting1.data prima di creare una nuova istanza caldo:

jQuery('.client_class').on('change', function() { 
    var selected = $(this).find("option:selected").val(); 
    console.log(hotInstance.getData()); 
    hotInstance.destroy(); 
    setting1.data = []; // this is the new line 
    hotInstance = new Handsontable(jQuery("#example1")[0], setting1); 
    console.log(hotInstance.getData()); 
}); 

Come si può vedere, questo farà sì che si sta reimpostando solo l'oggetto data. Questo problema si verifica perché HOT modifica intenzionalmente l'oggetto data mentre si modifica la tabella. Se si desidera, ad esempio, salvare l'oggetto data per ciascuno dei due due client modes, quindi suggerire di aggiungere la logica che memorizza ogni oggetto data e recuperarlo prima di creare la nuova istanza HOT. Qualcosa di simile a questo:

setting1.data = storedDataObjects["client1"]; // if adding "client1"