组织表单字段的索引

Question

我正在尝试考虑一个功能来帮助我组织表单结构中字段的自定义定位，但我没有成功。如果有人有任何想法，我将不胜感激。

此沙箱表示表单中类型为“文本”、“数字”、“日期”、“时间”、“uniqueSelection”、“multipleSelection”、“uniqueSelection”、“refUniqueSelection”、“refMultipleSelection”和最后，“refLookup”。类似于Excel的vLookup，对象中的键

index

代表表单中的位置。

codesandbox 项目链接

在查找字段中主窗体和“Carros”以及链接窗体“Completo”的视觉呈现。

我们有一些重要的条件：

item.fieldtype === "refLookup" 表示在 形式。 item.isReadOnly === true 表示lookup的子字段 领域。

item.isDeleted === true 表示已删除的字段 表单，但我们需要保留它们，因为这些中可能有数据 需要在表中显示的列。一个重大问题 这里是当删除一个字段并创建一个新字段时， 在表单中重复相同的索引，因为它被认为是 可以再次使用。

item.fieldtype !== "refLookup" && item.isReadOnly === 未定义 && item.isDeleted === undefined 表示其他活动字段 既不是查找字段，也不是任何其他查找字段的子字段。

如何以类似于原始表单结构的方式组织字段，并使子字段出现在其父字段下方？

Answer 1

要以类似于原始表单结构的方式组织字段，并且子字段出现在其父字段下方，您可以考虑使用递归函数。该函数可以遍历表单结构，维护层次结构，并生成所需的渲染顺序。

这是 JavaScript 中递归函数的高级示例，可以帮助您实现这种组织：

function organizeFields(formFields, parentFieldId = null) {
  const organizedFields = [];

  formFields.forEach((field) => {
    if (field.isDeleted) {
      // Handle deleted fields.
      // You might want to store them and reuse their index if needed.
    } else if (field.fieldtype === "refLookup") {
      // Handle lookup fields.
      // Recursively organize their child fields.
      field.childFields = organizeFields(field.childFields, field.id);
      organizedFields.push(field);
    } else {
      // Handle other active fields.
      if (field.isReadOnly) {
        // Handle child fields of lookup fields.
        // These can be inserted below their parent field.
        const parentFieldIndex = organizedFields.findIndex(
          (f) => f.id === parentFieldId
        );
        organizedFields.splice(parentFieldIndex + 1, 0, field);
      } else {
        // Handle other active fields.
        organizedFields.push(field);
      }
    }
  });

  return organizedFields;
}

在此示例中，organizeFields 函数递归处理表单字段，创建一个层次结构，其中子字段显示在其父字段下方。该代码假设您有一个表单字段数组，并且每个字段对象都具有用于查找字段的 id、isDeleted、fieldtype、isReadOnly 和 childFields 等属性。

您可以根据您的特定数据结构和渲染需求调整此代码。处理已删除的字段、在查找字段及其子字段之间创建关系以及根据层次结构管理顺序非常重要。