在 thymeleaf 中添加和删除具有多个元素的动态行并与列表绑定

Posted 2023-02-26

【中文标题】在 thymeleaf 中添加和删除具有多个元素的动态行并与列表绑定

【英文标题】：add and remove dynamic rows with multiple elements in thymleaf and bind with list

【发布时间】：2020-11-08 05:21:27

【问题描述】：

我有一个带有对象数组列表的 pojo 类，我想使用 jquery 将它与动态创建的元素绑定。

下面是我的 pojo 课

public class EmployeeTaskWarpper 

    private Long id;
    
    private Long mid;
    
    private List<Employee> emplist;

    //getter setter

下面是我的控制器类方法

@RequestMapping(value="/newEmployeeTasks", method = RequestMethod.GET)
    public ModelAndView newTasksForm()
        ModelAndView modelAndView = new ModelAndView();
        
        List<AllEmployess> namelist = credentialsService.findAllEmployees();
        modelAndView.addObject("namelist", namelist);
        EmployeeTaskWarpper emptasks = new EmployeeTaskWarpper();
        List<Employee> tasklist = new ArrayList<Employee>(20);
        emptasks.setTasklist(tasklist);
        modelAndView.addObject("tasklist", tasklist );
        modelAndView.setViewName("new-Task");
        return modelAndView;
    

下面是我的百里香代码，

<form th:action="@/createTasks" method="post" th:object="$tasklist">
    <div id="div_1" class="dyngroup" th:each="taske , stat : $tasklist.emplist">
        <div class="form-group row">
            <div class="col-3 col-sm-3 col-lg-3">
            <label>Assigned to Employee</label> 
            <select class="form-control" th:field="*emplist[__$stat.index__].employeeid">
            <option value="0">Select Employee</option>
            <option th:each="name : $namelist" th:value="$name.emp_Id"                        th:text="$name.employeeName"></option>
            </select>
        </div>
        <div class="col-3 col-sm-3 col-lg-3">           
            <label>description</label> 
            <input type="text" th:field="*emplist[__$stat.index__].description>
            </select>
        </div>
    </div>
</div>
<div class="row">
<div class="col-10 col-sm-10 col-lg-10"></div>
<div class="col-2 col-sm-2 col-lg-2">
<button class="btn btn-warning btn-xl" onclick="add()" type="button">Add</button>
</div>
</div>
<button class="btn btn-space btn-primary new-team-submit-button">Create</button>
</form>

下面是添加动态行的jquery代码，

<script>
    
    function add() 
    
      // Finding total number of elements added
      var total_element = $(".dyngroup").length;
        
      // last <div> with element class id
      var lastid = $(".dyngroup:last").attr("id");
      var split_id = lastid.split("_");
      var nextindex = Number(split_id[1]) + 1;
      
      var max = 5;
      // Check total number elements
      if(total_element < max )
     
       // Adding new div container after last occurance of element class
       $(".dyngroup:last").after("<div class='dyngroup' id='div_"+ nextindex +"'></div>");
     
       // Adding element to <div>
       $("#div_" + nextindex).append(
       "<div class='container-fluid'>"
       + "<div class='form-group row'>"
       + "<div class='col-3 col-sm-3 col-lg-3'>"
       + "<label>Assigned to Employee</label>" 
       + "<select class='form-control' th:field="+ *emplist[nextindex].employeeid +">"
       + "<option value='0'>Select Employee</option>"
       + "<option th:each='name : $namelist' th:value='$name.emp_Id' th:text='$name.employeeName'></option>"
       + "</select>"
       + "</div>"
       + "<div class='col-3 col-sm-3 col-lg-3'>"
       + "<label>description</label>" 
       + "<input type='text' th:field=" + *emplist[__$stat.index__].description +">"
       + "</div>"
       + "</div>"
       + "</div>");
    
    
    
     // Remove element
     function remove(id)
      
      var split_id = id.split("_");
      var deleteindex = split_id[1];

      // Remove <div> with id
      $("#div_" + deleteindex).remove();

     
    
    
    
    </script>

问题是，我无法渲染 thymleaf 代码。我还在控制器中添加了数组列表的大小，但仍然无法呈现代码。

谁能指导我正确的方向。

【参考方案1】：

当你用 jQuery 插入输入时，不要使用 th: 属性！

Thymeleaf 是模板引擎。每隔一天从服务器获取一个视图：元素被评估为纯 html。这意味着在生成的视图中，没有一个元素具有 th: 属性。所以你不能简单地用 jQuery 动态添加 th: 属性，因为此时它没有任何意义。

在您的脚本中，您应该将 th:field="+ *emplist[nextindex].employeeid 等属性替换为 name="emplist[' + nextindex + '].employeeid"

你可以写 name: only( name="emplist[' + nextindex + '].employeeid") 来代替 th:field

 + "<select class='form-control' name="emplist[' + nextindex + '].employeeid">"

 + "<input type='text' name=" emplist[' + nextindex + '].description">"