Question

我有一个包含表格的表格。我希望能够通过发送AJAX请求并将结果附加到表体来动态地向此表添加行。此请求应触发模板的呈现并将相应的元素添加到我的数据传输对象。这使我能够在用户按下提交按钮时舒适地保存对象。

我的问题是我需要在控制器中定义哪种处理程序方法才能将此行添加到我的模型中？如何通过使用我的AJAX请求传递模型？这可以完成吗？

您可以在下面找到用于创建表的代码段：

<div class="form-group form-row">
    <button type="submit" id="addAttribute" name="addAttribute" class="btn btn-success">
        <i class="fa fa-fw fa-plus"></i> New attribute
    </button>
</div>
<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Attribute name</th>
        </tr>
    </thead>
    <tbody id="attributeList">
    </tbody>
</table>

这是我的数据传输对象：

public class IEForm
{
    private String name;
    // ...

    // IEAttribute is defined somewhere else, but this doesn't matter right now
    private List<IEAttribute> attributes;

    // getters and setters

    public List<IEAttribute> getAttributes()
    {
        return this.attributes;
    }

    public void setAttributes(List<IEAttribute> attributes)
    {
        this.attributes = attributes;
    }
}

我的控制器用于创建表单页面和AJAX请求的处理程序方法：

@RequestMapping("/create")
String create(Model model)
{
    model.addAttribute("form", new IEForm());
    return "iecreation/creation";
}

@RequestMapping(value = "/addAttribute", params = {"addAttribute"})
public String addAttribute(IEForm dto, BindingResult result)
{
    dto.getAttributes().add(new IEAttribute());
    return "iecreation/newAttribute";
}

AJAX页面：

<tr>
    <td><i class="fa fa-fw fa-key"></i></td>
    <td>
        <input type="text" class="form-control col-lg-8" placeholder="Attributname"
            th:field="???"/>
    </td>
</tr>

用于将AJAX响应添加到表

的JavaScript代码

$(document).ready(function()
{
    $("#newAttribute").on("click", function()
    {
        $.ajax({
            type: "GET",
            url: "/ie/create/newAttribute",
            success: function(response)
            {
                $("#attributeList").append(response);
            }
        });
    });
});

我已经尝试了this approach，但它没有按预期行事，因为我的表单经常被提交（执行了错误的处理程序并且需要重新加载页面）。

This answer couldn't help me, as it's valid for JSP

一位同事建议添加大量隐藏的div，然后通过单击按钮动态显示它们。但是，我不喜欢这个解决方案，因为它不是很干净，属性数量有限。

感谢您的支持！

Answer 1

发送ajax后，您将从控制器获取列表对象，将该列表对象数据更好地附加到表体，以便使用jquery。如下所示

Jquery:
$(document).ready(function(){
     $.ajax({
            url: "yourURL", 
            type:"GET",
            .
            .
            .
             ,success: function(res){
                var index = 0;
                var subObj = '';
                var htm = '';
                for(index = 0; index < res.length; index++) {
                  subObj    =   res[index];

                  htm +='<tr>';
                       htm+='<td>'+subObj.value+'</td>';
                       htm+='<td>'+subObj.value+'</td>';
                       htm+='<td>'+subObj.value+'</td>';
                       htm+='<td>'+subObj.value+'</td>';
                       htm+='<td>'+subObj.value+'</td>';
                  htm+='</tr>';
              }
            $("table").find("tr:gt(1)").remove();
            $("table tbody").append(htm);

             },error:function(resp){


              }

        });


});

它可能会有所帮助。在这里，我使用jquery + ajax将数据附加到表体。

Answer 2

我们最终拒绝使用隐藏字段并通过JavaScript动态显示它们。

控制器创建一个大小为100个DTO对象的列表。该模板呈现每个DTO对象，为其索引分配其field属性，并添加一个名为d-none的CSS类，使它们不可见。在th:field属性中，指定了数组的索引，因此Spring可以正确地将表单数据映射到DTO。

<tr class="d-none form-group">
    <th><i class="fa fa-fw fa-minus-circle" th:id="|remove-${iterator.index}|"></i></th>
    <td>&nbsp;</td>
    <td>
        <input  type="text" class="form-control col-lg-8" placeholder="Attributname"
                th:field="*{attributes[__${iterator.index}__].name}"
                th:id="|attributeName-${iterator.index}|"/>
    </td>
</tr>

在JavaScript部分中，当用户在对象之间导航时，会动态添加和删除d-none CSS类。我们使用属性id的内容来获取当前可见属性的索引。

使用AJAX以动态方式向表中添加行

2 个答案: