使用jQuery重置列表

Question

我有一个列表（id'#staff'），显示存储在数据库中的员工姓名。

用户可以打开一个编辑器，允许他们重新排序，添加和删除内容，然后保存更改或取消。

保存功能有效。

我的问题是当您进行更改并单击取消按钮然后再次重新打开编辑器时，仍会显示更改而不是重置。

我试过了：

$('#staff').reset();

但这不起作用。

我想避免使用页面刷新。

如何解决此问题？

Answer 1

当页面第一次加载时，为将来复制列表，然后用稍后的副本替换列表。

$(function() {
    var my_copy = $('#list').clone(true);
    $('#reset_button').click(function(){
        $('#list').replaceWith(my_copy);
    });
});

文档：

• clone
• replaceWith

为了使其更加灵活，请将克隆存储在列表中。

$(function() {
    $('#editor_open_button').click(function() {
        $('#list').data('my_clone',$('#list').clone(true));
    });
    $('#reset_button').click(function(){
        $('#list').replaceWith($('#list').data('my_clone'));
    });
});

Answer 2

您应该将原始内容存储在变量中。

Answer 3

您需要保存控件/数据的状态。然后，如果单击取消按钮，则用保存的数据覆盖控件的所有值。