как предупреждать об изменениях в ячейках jexcel, если пользователь перемещается с помощью onbefoerunload - PullRequest
Новая
       53

как предупреждать об изменениях в ячейках jexcel, если пользователь перемещается с помощью onbefoerunload

0 голосов
/ 06 мая 2020

Я хочу показать предупреждение об изменениях, внесенных в ячейки 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 Cell. Пользуюсь jexcel v4

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Jsuites является зависимостью от jexcel, и у него уже есть плагин, который позволяет это. *

Еще одно изменение - запуск formTracker только после того, как вы установили исходное содержимое таблицы. Таким образом, если пользователь открывает таблицу, не вносите никаких изменений, и выход не будет предупрежден, поскольку не было изменений в данных.

Источник: https://bossanova.uk/jsuites/tracking-for-form-changes

1 голос
/ 06 мая 2020

Вы можете прикрепить прослушиватель событий 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>

Таким образом, вы можете просто изменить свою несохраненную переменную / флаг в слушателе событий onchange, также этот пример взят с официального сайта где у него есть список слушателей событий, прикрепленных к таблице jexcel

...