时间戳

首页 > 解决方案 > 如果用户使用 onbefoerunload 导航，如何在 jexcel 单元格中发生更改时发出警报

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

问题描述

我想对 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

标签： javascriptjqueryalertspreadsheetonbeforeunload

解决方案

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

推荐阅读