Question

我正在设置一个用于设置和更新Web应用程序中不同模块的参数的小窗口，为此，我使用的是jQueryUI对话框，该对话框当时从每个模块加载设置。我的问题是，如果您按了取消按钮，即使我之前进行了更改并保存了它们，然后再次打开对话框并取消，它也会将所有配置重置为初始状态。
另外，我希望“关闭'X'按钮与取消按钮具有相同的行为。

    var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;

var closedFunction = function() {
    $(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
    $(appDiv).dialog( "close" );
    $(Container).append(appDiv);
};
var cancelFunction = function() {
    $(appDiv).dialog( "close" );
    appDiv.innerHTML = backupDiv;
    $(Container).append(appDiv);
}
$(appDiv).dialog({
    "modal": true,
    "title": "Edit",
    "close": closedFunction,
    "buttons": {
        "Save": closeFunction,
        "Cancel": cancelFunction
    },
    "minWidth": 600
});

循序渐进：
1.打开对话框并进行一些更改，
2.保存更改，
3.再次打开对话框而不进行任何更改，
4.点击取消按钮。
此时，我将丢失之前所做的更改并保存在步骤2中，并且该模块返回到步骤1之前的状态。

我知道使用

    appDiv.innerHTML = backupDiv;

正在导致这种特定情况下的更改丢失，但是如果我实际上要撤消任何修改，它会很好地工作。

编辑：
我一直在挖掘，到目前为止，我找到了将“取消”行为复制到“关闭'X”按钮（How to find out if jquery dialog was closed on escape and execute some code）的解决方案：

 var closedFunction = function (event, ui) {
    if (event.originalEvent) {
        cancelFunction();
    }
    $(appDiv).dialog("destroy");
};

通过在closedFunction（）中添加此if子句，可以让我通过单击“ X”按钮或按ESCAPE键来捕获关闭对话框时的情况，然后可以在if和now中调用cancelFunction（）。就像点击“取消”按钮一样。

Answer 1

考虑这个半基本示例。

$(function() {
  var appDiv = $("#appDialog");

  function editSetting(s) {
    $(".setting-id", appDiv).val(s.id);
    $(".setting-name", appDiv).html(s.label);
    $(".setting-value", appDiv).val(s.value);
    appDiv.dialog("open");
  }

  function saveSetting() {
    var sid = $(".setting-id", appDiv).val();
    var v = $(".setting-value", appDiv).val();
    $("#" + sid).data("value", v);
  }

  function resetDialog() {
    $(".setting-id", appDiv).val("");
    $(".setting-name", appDiv).html("");
    $(".setting-value", appDiv).val("");
  }

  appDiv.dialog({
    autoOpen: false,
    modal: true,
    minWidth: 300,
    buttons: [{
      text: "Save",
      icon: "ui-icon-check",
      class: "ui-priority-primary",
      click: function() {
        saveSetting();
        appDiv.dialog("close");
      }
    }, {
      text: "Cancel",
      icon: "ui-icon-close",
      click: function() {
        appDiv.dialog("close");
      }
    }],
    close: function(e, ui) {
      resetDialog();
    }
  });

  $(".app .edit-setting").button().click(function(e) {
    var that = $(this).parent();
    var setting = {
      id: that.attr("id"),
      label: $("label", that).text(),
      value: that.data("value")
    };
    editSetting(setting);
  });

  $("form", appDiv).submit(function(e) {
    e.preventDefault();
    saveSetting();
    appDiv.dialog("close");
  });

  $(".app > .save").button().click(function() {
    var settings = {};
    $(".app li").each(function(ind, el) {
      var k = $(el).attr("id");
      var v = $(el).data("value");
      settings[k] = v;
    });
    //Save Settings to Storage
    console.log(settings);
  });
});

.app ul {
  margin: 10px;
  padding: 0;
  list-style: none;
  width: 300px;
}

.app ul li {
  border: 1px solid #CCC;
  padding: .5em;
  margin-bottom: -1px;
}

.app ul li:first-child {
  border-radius: 3px 3px 0 0;
}

.app ul li:last-child {
  border-radius: 0 0 3px 3px;
}

.app ul li label {
  display: inline-block;
  width: 200px;
}

.app .save {
  margin-left: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="app ui-widget">
  <ul>
    <li id="set-1" data-value="A"><label>Setting 1</label><button class="edit-setting">Edit</button></li>
    <li id="set-2" data-value="B"><label>Setting 2</label><button class="edit-setting">Edit</button></li>
    <li id="set-3" data-value="C"><label>Setting 3</label><button class="edit-setting">Edit</button></li>
  </ul>
  <div id="appDialog" class="appDiv" title="Edit Setting">
    <form>
      <input type="hidden" class="setting-id" />
      <label class="setting-name"></label>: <input type="text" class="setting-value" />
    </form>
  </div>
  <button class="save">Save Settings</button>
</div>

如果我们将对话框视为容器或模板，则可以用各种数据填充单个对话框。然后只需打开和关闭它即可。

单击“编辑”按钮时，当前设置和值会在打开对话框之前加载到对话框中。点击“ X”或按“取消”将关闭对话框而不保存。用<form>包裹我们的条目，使我们可以使用 Enter 提交表单或单击“保存”。两者都配置为在关闭对话框之前保存该值。

我在关闭回调中添加了一个重置功能，因此无论何时关闭该对话框，它都会清除所有较旧的数据。这并不是完全需要的，因为当我们打开对话框时，它将数据填充到字段中。

我们必须将值存储在某个地方。在此示例中，我使用data属性。可以将其添加为HTML的一部分，并由jQuery读取。它没有持续。您会看到一个最终的保存按钮，它可以读取新值并将其推送到localStorage或数据库中。

希望这会有所帮助。

如何改善取消按钮的行为并使关闭动作与取消相同？

1 个答案: