0

我正在设置一个小窗口来设置和更新 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”按钮的解决方案（如何找出 jquery 对话框是否在转义时关闭并执行一些代码）：

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

通过在 closedFunction() 中添加这个 if 子句，我可以通过点击“X”按钮或按下 ESCAPE 键来捕获对话框何时关闭，然后我可以在 if 和 now 中调用 cancelFunction() 与如果点击取消按钮。

4

1 回答 1

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 或数据库。

希望这可以帮助。

于 2019-05-08T21:41:44.770 回答