动手消灭和创造

Question

我想要销毁并重新创建我的excel表格,我正在使用Handsontable,因为对象被破坏并创建了新的,但行内的数据对于新表格和旧表格都是相同的

既然标题类似于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。data出现此问题的原因是 HOT在您编辑表时故意改变对象。例如，如果您想data为两个对象保存每个对象client modes，那么我建议您添加存储每个data对象并在创建新的 HOT 实例之前检索它的逻辑。像这样的东西：

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