如何使用Struts 1.3和javascript創建表的動態行

Question

我有一個聯繫表，該表包含名字，姓氏和多個電話號碼。所以我的模型是這樣的

 


    Contact { 
    String firstName; 
    String lastName; 
    List phones; 
    } 

    Phone { 
    String category; //home, work, mobile, etc 
    String phoneNumber; 
    } 

 

所以它會有網頁包含兩個輸入文本的名字和姓氏，並添加電話按鈕。當單擊添加按鈕時，它將再次爲類別和電話號碼生成兩個輸入文本，併爲該行生成一個刪除按鈕。

我已經嘗試使用索引=屬實，這將產生像

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

的問題是，我不知道怎麼寫的JavaScript，因爲我不知道什麼是當前索引的HTML，如果用戶單擊Add按鈕，如果用戶點擊了刪除按鈕然後添加按鈕，那麼它會是什麼樣的？沒關係，如果我缺少索引？類似於

<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

這裏的第一件事是使用索引和邏輯：迭代標籤來生成代碼。如果對此有疑問，請查看我給出的答案，詳細說明如何在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> 

，並追加到表。

上德爾：使用相同的技術如上面找出哪些線（或對應的索引）已刪除。然後，編輯剩餘行的索引，以便它與後續行的元素順序匹配。

例：

表：

<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的名稱有的指數，這樣一來，該表是回支柱索引的格式：

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

我希望這是很清楚。我顯然不能編寫所有的js函數，因爲它們需要一些工作，但有了這些信息，你可以自己完成。