动手破坏和创造

Question

我想销毁并重新创建我的 excel sheet 我正在使用 Handsontable 它 object 正在被销毁并创建新的但里面的数据新 table 和旧

的行相同

因为标题与相似我已经实现了之前 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

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

要实现我认为是您预期的行为，请在创建新的热实例之前重置 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 在您编辑 table 时故意改变 data 对象。例如，如果您想为两个 client modes 中的每一个保存 data 对象，那么我建议您添加逻辑来存储每个 data 对象并在创建新对象之前立即检索它热实例。像这样：

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

动手破坏和创造

handsontable destroy and create

jquery

handsontable