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

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

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

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

实施例

表：

<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函数，因为它们需要一些工作，但有了这些信息，你可以自己完成。

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

1 个答案: