jexcel 清除和更新新数据

Question

我的 UI 上有一个简单的下拉菜单，如果用户更改该组件，jexcel table 也应该更改它的数据。我希望清除 table 并获得更改后的值，但在我的案例中发生的事情只是生成 table 的新实例，而不是清除现有数据。

这是我的示例代码：

<select class="custom-select form-control" id="tempSel" onchange="templateChange()"></select>
<div id="spreadsheet" style="margin-left:10px; margin-top:10px"></div>

JS:

function displayOutput(data, headers, width) {      

        table = jexcel(document.getElementById('spreadsheet'), {
            data: data,
            colHeaders: headers,
            colWidths: width,
            allowInsertColumn: false,
            csvHeaders: true,
            tableOverflow: true,
            tableHeight: '650px',
        });               
    }

    function templateChange() {

        template = $("#tempSel").val();
        if (template == 0) {            
            $.get("/Db/getData1", { 'table': 0 })
                .done(function (res) {                    
                    data = res.data;
                    console.log(data);
                    displayOutput(data, ['NAME', 'AGE', 'GENDER'], [200, 200, 200]);
                });

        } else if (template == 1) {
            $.get("/Db/getData2", { 'table': 1 })
                .done(function (res) {                    
                    data = res.data;
                    console.log(data);
                    displayOutput(data, ['TYPE', 'SIZE', 'JOB'], [220, 220, 220]);
                });
        }
    }

Answer 1

找到解决方案link https://github.com/paulhodel/jexcel/issues/498

只需要在添加新的之前先清除 table:

document.getElementById('spreadsheet').innerHTML = '';

Answer 2

您可以尝试类似的方法：

jSuites.ajax({
    url: '/yoursource/xxx',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        document.getElementById('spreadsheet').jexcel.setData(data);         
    }
})

jexcel 清除和更新新数据

jexcel clearing and updating new data

javascript

jexcelapi