使用 JavaScript/JQuery 创建多字段就地编辑器

Question

我正在寻找一种在 JavaScript 中创建就地编辑器的方法，例如 JEditable 或类似插件。然而，不同之处在于我的编辑器将是多字段表单而不是单字段。

由于相同的表单将用于不同的部分，即编辑现有项目和创建新项目，我希望能够为每种情况指定回调函数，而不必重复共享功能（例如验证、取消按钮等） .)。

目前，我尝试天真地实现它，代码看起来很糟糕，因为事件处理程序分散在源代码中，而不是作为一个组件在一起。

所以我的问题是推荐的实现方法是什么？如果有一个 jQuery 插件提供该功能，那可能是最简单的途径。否则，我将如何正确构建我的代码？

Answer 1

分离回调的定义并在可编辑回调中查找所需的回调

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});

Answer 2

问题是您需要将数据与显示的文本分开。对于显示的每个数据块，将 json 字典（写入页面或使用 ajax 拉取）与表单中每个字段的文本相关联。

例如，如果您正在使用名称（名字，中间，最后），您将显示如下名称：

<span class="editable">Colin M. Hansen</span>

并且您编写如下形式的表单：

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

并且您有一个像这样的字典，映射到表单中的输入

name1 = {
    first: 'Colin',
    mi: 'M',
    last: 'Hansen'
};

：您编写的通用代码会在 span 元素的 onclick 上切换文本的表单，并使用字典中的数据填充每个输入字段。提交代码将新数据保存到 name1 和服务器，并返回新的显示文本。