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

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

Answer 2

您可以在Jexcel中创建并按以下步骤销毁它们：

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/excel-formula.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    [ 'Cheese', 10, 1.10, '=B1*C1'],
    [ 'Apples', 30, 0.40, '=B2*C2'],
    [ 'Carrots', 15, 0.45, '=B3*C3'],
    [ 'Oranges', 20, 0.49, '=B4*C4'],
];

$('#my').jexcel({
    data:data,
    colHeaders: [ 'Product', 'Quantity', 'Price', 'Total' ],
    colWidths: [ 300, 100, 100, 100 ],
    columns: [
        { type: 'autocomplete', source:[ 'Apples','Bananas','Carrots','Oranges','Cheese','Pears' ] },
        { type: 'number' },
        { type: 'number' },
        { type: 'number' },
    ]
});
</script>

<input type='button' value='Destroy' onclick="$('#my').jexcel('destroy')">

</html>

更多示例：https://bossanova.uk/jexcel

动手消灭和创造

2 个答案: