时间戳

首页 > 解决方案 > javascript中的数据结构，用于存储文档中更改的所有输入字段

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

问题描述

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

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

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

解决方案： 现在我想让用户更改他想要的所有字段，然后使用“更新”按钮为所有更改的视图进行写入。

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

有更好的方法吗？比如：如果用户更改一个字段而不是调用来存储新数据，将所有信息放入字典、列表、数组或其他东西中......当用户按下更新时，我会读取这个结构并将所有数据存储在里面.

编辑词典：

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

标签： javascriptodoo-10

解决方案

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

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
      }
    });

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

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

迭代完成后的结果应该类似于以下内容：

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

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

PS 这里的代码是一个示例，因此显然需要确保您的 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: {...}
}

推荐阅读