Thymeleaf + spring + jquery動態添加表格

Question

從動態添加的百里香葉下拉菜單中獲取值有困難。

這是我第一次

<select th:field="${offer.offerItemList[__${iterationStatus.index}__].mapa}" class="form-control input-sm ofa"> 
<option value="0" >---Choose option---</option> 
<option th:each="attribute : ${offer.offerProductAttribute}" th:value="${attribute.id}" th:text="${attribute.name}"></option> 
</select> 

基於從此下拉我生成與此類似代碼的另一個下拉選擇中：

var options = '<select th:field="offer.list" class="form-control input-sm"> <option th:value="0">--Choose--</option>'; 
$.each(value.offerProductAttributeValuesList, function (index, value) { 
          options += '<option th:value="' + value.id + '">' + value.value+ '</option>'; 
         }); 
         options+= '</select>'; 
         of.closest('tr').find('td:last').html(options); 

DOM元素產生的罰款。一切都很好，但值永遠不會與其餘的輸入字段一起提交。

我已經這樣做了很多次，但與先前渲染

<select> 

下拉在服務器端，而我只想appendTo（）選項，但在這種情況下，我不能這樣做，因爲我可能有不止根據客戶從之前的下拉列表中選擇20個下拉菜單。

我希望我對我的問題已經夠清楚了。

Answer 1

下拉我要去回答我的問題，因爲我花了相當長的一段時間來解決這個問題的數據，和我的解決方案可能會幫助別人的未來。

的問題是：我有對象的列表，以及這些對象中的每一個有對象的另一個列表。

1. 的問題是要解決，如果你只呈現從後端整個視圖（我使用thymeleaf）容易得多。這樣，你可以使用thymeleaf表情映射一切正常 像這樣：

2. 首先，你要每個方面都在頂層列表迭代

<tr th:each="item,iterationStatus : ${offer.offerItemList}">

您需要使用iterationStatus遍歷嵌套列表，像這樣：

<select th:field="${offer.offerItemList[__${iterationStatus.index}__].mapa}">

這段代碼__${iterationStatus.index}__基本上會使用迭代索引，並且您將以每個迭代的編號結束，並且呈現的視圖將看起來像這樣offer.offerItemList[0].mapa以及1和2等等。

這種方式值將被正確映射，但是，如果你想動態添加字段事情會變得有點複雜。

1. 有jQuery的問題。由於jquery在頁面呈現時幾乎綁定了選擇器，即使你編寫了添加另一個元素，比如說<div class="temp"> ，並寫出完美的jquery函數，像這樣$('.temp').on('click',function(){ console.log("clicked")}); 沒有什麼會發生，因爲jquery沒有將你新創建的元素綁定到任何select/event listener 。解決方案是使用（文檔）。

$(document).on("click",".temp",function(){console.log('clicked');})

好的，我們有固定的前端問題，現在新建項工作，但我怎麼告訴Spring將它們綁定到列表中的每個對象，這是另一個列表的一部分？以及你將不得不反覆索引再次使用：

1. 當渲染視圖，你需要在每一個元素保存迭代索引值（使用隱藏域）
2. 獲得價值爲每個輸入字段jQuery的變種這樣：var iteration = $(this).closest('tbody').find('td:first-child').find('input').attr('value'); ofc這是我放置隱藏的輸入字段的路徑，您將不得不根據您的結構告訴jquery在哪裏查看。
3. 您將模擬陣列和指數這樣 var options = '<select name="offerItemList['+iteration+'].mapaValues">';
4. 而你需要小心對待的最後一件事是這樣的：假設你有對象，您通常會從控制器發出這樣model.addAttribute("offer",offer);對象的報價已經屬性，產品列表，因此您可以用簡單的offer.productsList訪問該列表，但每個產品都有AttributeValues列表。因此，最終安裝看起來像這樣 offer.products[0].attributes[0].name產品是類Product的對象的數組列表，屬性是類AttributeValues的對象的數組列表，名稱是字符串。爲了讓Spring用信息spring創建類AttributeValues的對象，Spring從葉頂端動態地（而非非形式地）創建表單，你需要教他如何。如果您的新表單的input type =「text」正在發回字符串，那麼您將需要爲您的類AttributeValues創建一個自定義構造函數 ，該類將接收一個字符串，它將告訴Spring如何「構造」實例與String的類。

最終創建兩個構造，一個默認，一個以字符串爲一個值： public AttributeValues(){};，另一個用於字符串public AttributeValues(String n){this.name = n;};

Answer 2

你最有可能看到這裏的問題是，你產生的客戶端thymeleaf標記。 Thymeleaf是一種服務器端模板語言，所以瀏覽器（以及Javascript）只會看到簡單的HTML回來。

下面的幾個方法來考慮：

• 每次在獲得新數據，這意味着不需要JavaScript
• 輸出每一個可能的下拉到HTML提交表單，並顯示/隱藏根據用戶選擇選項時的需要。一些相當簡單的Javascript必需的，但你提到 - 頁面大小可能是相當大的
• 添加JSON端點到您的Spring web（見春註解@ResponseBody），將返回你需要的數據，然後拉那JSON當用戶選擇使用類似jQuery.get()