当用户使用 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细胞起作用。I use jexcel v4
素胚勾勒不出你浏览 113回答 2
2回答
-
凤凰求蛊
您可以将事件侦听器附加到jexcel表，这里有一个jsfiddle来演示如何监听单元格上的更改事件，这里也是代码作为片段（片段将不起作用，因为SO是沙箱，不允许某些代码运行，如果您进行测试，此片段将在您的本地计算机上工作）：onchange<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>因此，您只需在事件侦听器中更改未保存的变量/标志即可，此示例也取自官方网站，其中有一个附加到jexcel表的事件侦听器列表onchange -
慕尼黑的夜晚无繁华
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
随时随地看视频慕课网APP
相关分类
JavaScript