可操作的破坏和创造

Question

我想销毁并重新创建我正在使用 Handsontable 的 Excel 表，对象被销毁并创建了新的，但行内的数据对于新表和旧表是相同的

因为标题类似于SO QUESTION 我已经实现了上一个 SO 问题中的答案，但我仍然卡住了
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

我假设您的问题是您正在尝试使用空数据创建一个新表，但您的并没有这样做。简单的解决方案是，在倒数第二行，您将新的 HOT 实例设置为具有 setting1 作为新选项对象，忘记了 JS 中的对象可以被变异，这意味着 setting1.data 正在被变异，而不管表。

要实现我认为您的预期行为，请在创建新的热实例之前重置 setting1.data：

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());
});

如您所见，这将确保您仅重置 data 对象。出现此问题的原因是 HOT 在您编辑表时有意改变了 data 对象。例如，如果您想为两个client modes 中的每一个保存data 对象，那么我建议您添加逻辑来存储每个data 对象并在创建新的HOT 实例之前立即检索它。像这样的：

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