如果用户使用 onbefoerunload 导航，如何在 jexcel 单元格中发生更改时发出警报答案

【问题标题】：how to alert when changes in jexcel cells if user navigates using onbefoerunload如果用户使用 onbefoerunload 导航，如何在 jexcel 单元格中发生更改时发出警报
【发布时间】：2020-05-06 05:27:53
【问题描述】：

我想对 jexcel 单元格中的更改显示警报。

我有一个保存按钮来保存数据。现在，如果用户更改任何单元格，我想在导航到其他页面时使用 onbeforeunload 显示警报。

var unsaved = false;

$(":input").change(function(){ //triggers change in all input fields including text type
    unsaved = true;
});

function unloadPage(){
    if(unsaved) {
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
}

window.onbeforeunload = unloadPage;

此代码仅适用于输入类型。如何使其适用于 jexcel 单元格。我使用 jexcel v4

【问题讨论】：

标签： javascript jquery alert spreadsheet onbeforeunload

【解决方案1】：

您可以将onchange 事件侦听器附加到您的 jexcel 表中，这是一个 jsfiddle 来演示如何在您的单元格上侦听更改事件，这里也是作为 sn-p 的代码（sn-p 不会工作，因为 SO 是沙盒，不允许某些代码运行，如果你测试它，这个 sn-p 将在你的本地机器上工作）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<script src="//bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="//bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="//bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="//bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>
<div>
    <button onclick="$('#log').html('')">Clear</button><br>
    <p>Log:</p>
    <div id="log" style="background-color:#c7eaff; border-radius:2px; color:#000; padding:20px"></div>
</div>

<script>
var changed = function(instance, cell, x, y, value) {
    var cellName = jexcel.getColumnNameFromId([x,y]);
    $('#log').append('<p>New change on cell ' + cellName + ' to: ' + value + '</p>');
}

var data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

jexcel(document.getElementById('spreadsheet'), {
    data:data,
    rowResize:true,
    columnDrag:true,
    columns: [
        { type: 'text', width:'200' },
        { type: 'text', width:'100' },
        { type: 'text', width:'100' },
        { type: 'calendar', width:'100' },
    ],
    onchange: changed
});
</script>
</html>

因此，您可以简单地在 onchange 事件侦听器中更改未保存的变量/标志，此示例也取自 official website，其中有一个附加到 jexcel 表的事件侦听器列表

【讨论】：

【解决方案2】：

Jsuites 是 jexcel 的一个依赖项，并且已经有一个插件可以启用它。

<form id='myForm'>
<input type='hidden' name='data'>
<div id='spreadsheet'></div>
<input type='button' value='Save data' onclick='saveData(); myTracker.resetTracker()'>
</form>

<script>
var myTracker = jSuites.tracker(document.getElementById('myForm'));

jexcel(document.getElementById('spreadsheet'), {
    onafterchanges: function(el) {
        document.forms[0].name.value = el.jexcel.getData();
    }
}
</script>

所以，基本上你实现 saveData 来保存数据并重置跟踪器以再次开始跟踪更改。

这里的另一个更改是仅在您设置初始表格内容后才启动 formTracker。因此，如果用户打开表不执行任何更改，并且离开不会发出警报，因为数据没有变化。

来源：https://bossanova.uk/jsuites/tracking-for-form-changes

【讨论】：