动态表单字段和数据库数据检索

Struts2 - Dynamic form fields and database data retrieval

本文关键字：数据 检索 数据库 表单 字段 动态      更新时间：2023-09-26

我正在使用Struts2开发一个注册web应用程序，需要一些指导。

背景:

在注册表单上，有一组5个表单字段:1个文本框和4个下拉选择框。这五个字段描述了一个人在教育环境中的主要职位:文本字段允许用户插入他们的职位，下拉菜单允许用户选择他们所属的学校、机构、部门和分部。下拉菜单用存储在数据库中的选项初始化(在注册操作中，在显示表单之前用这些值初始化数组列表)。例如:

<s:select emptyOption="true" key="school1.schoolId" list="schoolList" listKey="schoolId" listValue="schoolName" required="true" />

问题:

我需要为用户提供添加X个次要位置的能力。在注册表单上，用户可以单击"添加另一个从属关系"按钮，然后显示5个表单字段中的一组新字段。这些字段也需要验证，并在用户单击表单的提交按钮时保存。

解决这个问题的最好方法是什么?到目前为止，我只为每个表单字段声明了数组列表，如下所示: 
private List<String> jobTitles = new ArrayList<String>();
private List<School> schools = new ArrayList<School>();
private List<Institution> institutions = new ArrayList<Institution>();
private List<Department> departments = new ArrayList<Department>();
private List<Division> divisions = new ArrayList<Division>();

但我不知道如何进行。如何显示主要位置的初始5个字段?如果我使用Javascript动态地插入新的表单字段，我如何用存储在数据库中的选项初始化动态下拉菜单?如果页面重新加载，我如何保留这些值?

任何帮助是感激-谢谢!

您需要解决的基本问题是如何将请求参数的索引列表获取到操作类中。这很简单，我认为你是在正确的轨道上，从创建输入参数的List s开始。我在这里找到了一些关于这个主题的文档。基本上，您可以使用名称为jobTitles[0], jobTitles[1]的表单字段来填充jobTitles列表。

然而，我认为"隶属关系"的概念值得一个单独的类:

class UserAffiliation {
   private String title;
   private String schoolId;
   private String institutionId;
   private String departmentId;
   private String divisionId;
   // Make sure that there is a no-args constructor (default or explicit) for Struts to create instances. 
   // Add getters and setters
}

在你的action类中:

   private List<UserAffiliation> affiliations;
   ...
   // getter and setter for affiliations

足以捕获用户输入。

您的jsp可以看起来像这样:

<form action=".." method="post">
  <div class="affiliation">
     <s:textfield name="affiliations[0].title"/>
     <s:select name="affiliations[0].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
     ...
  </div>
  <s:if test="affiliations != null && affiliations.size > 1">
    <s:iterator value="affiliations" begin="1" status="status">
        <s:textfield name="affiliations[%{#status.index + 1}].title"/>
        <s:select name="affiliations[%{#status.index + 1}].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
            ...
    </s:iterator>
  </s:if>
  ....
</form>
<div id="affilationTemplate" style="display:none;">
   <div class="affiliation">
      <s:textfield name="affiliations[__IDX__].title"/>
      <s:select name="affiliations[__IDX__].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
   </div>
   ...
</div>

注意div affilationTemplate。您可以使用JS获取该模板的html，用适当的索引替换__IDX__，并在用户单击"添加另一个从属关系"按钮时附加到表单内容。这可以确保新添加的选择框预先填充了适当的值。

迭代器块显示用户已经提交的值(除了'primary affiliation'，它已经在上面显示了)。

注意:当然，如果可能的话，应该尽量去掉重复的表单元素。我会尝试将它们提取到include中

相关文章：