javascript 中的数据结构，用于存储文档中更改的所有输入字段

Question

我有一个用 Odoo 动态生成的文档。我有 n 个 div，里面可以有不同类型、复选框、文本、数字等的输入框。

现在，当用户更改一个字段时，我会对后端进行 rpc 调用并存储更改后的视图的值。

但这是一个问题，因为客户端服务器非常慢....每次写入数据库都需要很多时间....这是一个清单，并不好。

解法： 现在我想让用户更改他想要的所有字段，然后使用按钮 "Update" 为所有更改的视图写入。

问题我不熟悉 javascript 并且不知道如何实现它。现在我想把所有生成的行放在一个标签 form 中，当用户单击按钮 "Update" 调用 javascritp form_id.submit() 并找到一种方法来检索输入的所有不同名称和存储值。

有更好的方法吗？类似于：如果用户更改一个字段而不是调用存储新数据，将所有信息放入字典、列表、数组或其他内容中......当用户按下更新时，我读取此结构并将所有数据存储在其中.

编辑词典词典：

dict= {
    id_line:{key:values, key:values}
    id_line:{key:values, key:values}
    ...
    }

Answer 1

您可以执行类似以下操作，这会将您的值推送到一个数组中：

var dataToSend = [];
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch(inputField.type) {
        case 'text':
        case 'number':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.value 
          });
          break
        case 'checkbox':
          dataToSend.push({ 
            inputName: inputField.name, value: inputField.checked
          });
          break
        default:
          break
      }
    });

您将首先创建一个空数组，然后在您的表单域中查询其中的所有输入元素。根据浏览器的不同，这可能 return 支持 forEach 方法的可迭代 NodeList，或者它可能 return 原型上没有 forEach 方法的 NodeList。

为简单起见，我们假设浏览器支持它。从这里开始，您需要做的就是确定您当前正在迭代的输入字段的类型，然后使用它的名称和值动态创建一个对象并将其推送到您之前构建的数组中。

迭代完成后的结果应如下所示：

[
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' },
  { inputName: '...', value: '...' }
]

如果您担心 NodeList 不支持 forEach 方法，可以参考此 post 了解更多信息，并对该主题进行一些额外的 Google 搜索。

P.S。这里的代码是一个例子，所以显然要确保你的 switch 语句涵盖你正在处理的所有形式的输入

备选方案： 发帖者还询问是否可以将此数据不存储在数组中，而是存储为具有嵌套对象实体的对象。所以这是解决方案

var dataToSend = {};
var inputFields = document.querySelectorAll('#myform input');
    inputFields.forEach(function(inputField) {
      switch(inputField.type) {
        case 'text':
        case 'number':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          }
          break
        case 'checkbox':
          dataToSend[inputField.name] = { 
            inputName: inputField.name, 
            value: inputField.value
          }
          break
        default:
          break
      }
    });

这应该会给你这样的结果：

{
  someFieldName: {...},
  someFieldName2: {...},
  someFieldName3: {...}
}

javascript 中的数据结构，用于存储文档中更改的所有输入字段

Data structure in javascript to store all input fields changed in document

javascript

odoo-10