我想为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
你可以附加 onchange 事件监听器到你的jexcel表中，这里有一个例子。jsfiddle 来演示如何监听单元格上的变化事件，这里也有代码作为一个片段（这个片段将无法工作，因为SO是沙盒，不允许某些代码运行，如果你测试出来，这个片段将在你的本地机器上工作）。
<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>所以你可以简单的在里面修改未保存的变量flag。onchange 事件监听器，这个例子也是从 官网 其中，它有一个连接到jexcel表的事件监听列表。
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。所以，如果用户打开一个表不要进行任何更改，离开也不会提醒，因为数据没有变化。