如何使用 Struts 1.3 和 javascript 创建动态表行

Question

我有一个联系人表，该表包含名字、姓氏和多个电话号码。所以我的模型是这样的

Contact { String firstName; String lastName; List phones; } Phone { String category; //home, work, mobile, etc String phoneNumber; }

因此它的网页将包含两个输入文本，分别是名字和姓氏，以及一个添加电话按钮。当点击添加按钮时，它会再次生成两个输入文本用于类别和电话号码，以及该行的删除按钮。

我尝试过使用 indexed=true，它会生成一个类似的 html

<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />

问题是，我不知道如何编写javascript，因为如果用户单击添加按钮，我不知道当前索引是什么，如果用户单击删除按钮然后添加按钮，它将是什么索引？如果我缺少索引可以吗？类似的东西

<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />

注意：也请考虑编辑场景。

Answer 1

这里首先要好好利用indexed和logic:iterate标签来生成代码。如果对此有疑问，请查看我给出的这个答案，它详细解释了如何在 struts 中使用索引属性：indexed and logic:iterate

然后，您必须考虑用户想要添加或删除行并正确更新索引的场景，以便 struts 能够在您提交表单时检索数据。我曾经遇到过这个问题，我所做的是：

添加：使用javascript，找出表格的最后一行是什么，并通过查看页面生成的代码，生成一个新的表格行，内容为空，方括号内的索引.最后，添加到表

EXAMPLE:

一张桌子：

<table><tr><td name='whatever[0].something'>asdf</td></tr>  
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>

要添加一行，请像这样在 javascript 中创建它：

var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>

并将其附加到表格中。

on del：使用与上述相同的技术找出删除了哪一行（或相应的索引）。然后，编辑剩余行的索引，使其与后续行的元素顺序匹配。

示例：

一张桌子：

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>

假设您通过从 dom 中删除 asdf1 来删除它。然后，新表将如下所示：

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>

现在我们必须更新索引，使其匹配正确的顺序，通过将第二个 td 的名称更改为索引为 1，这样，表将恢复为 struts 索引格式：

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>

我希望它足够清楚。我显然无法编写所有的 js 函数，因为它们需要一些工作，但是有了这些信息，您可以自己编写。