Динамически добавлять строки в таблицу в форме с помощью AJAX - PullRequest
Новая
       5

Динамически добавлять строки в таблицу в форме с помощью AJAX

0 голосов
/ 24 мая 2018

У меня есть форма, которая включает в себя таблицу.Я хочу иметь возможность динамически добавлять строки в эту таблицу, отправив запрос 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;
    }
}

Myметоды обработчика контроллера для создания страницы формы и для запроса 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>

Код JavaScript для добавления ответа AJAX в таблицу 

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

Я попробовал этот подход , но он не работал, как ожидалось, так как моя форма постоянно отправлялась (выполнялся неправильный обработчик, и страница должна была быть перезагружена).

Этот ответ не помог мне, так как он действителен для JSP .

Коллега предложил добавить большое количество скрытых элементов div, а затем динамически сделать их видимыми, нажав кнопкукнопка.Однако мне не нравится это решение, так как оно не очень чистое и количество атрибутов ограничено.

Спасибо за вашу поддержку!

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Наконец-то мы остановились на использовании скрытых полей и их динамическом отображении с помощью JavaScript.

Контроллер создает список размером в сотню объектов DTO.Шаблон отображает каждый объект DTO, назначает его свойство поля с индексом и добавляет класс CSS с именем d-none, который делает их невидимыми.В атрибуте 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 класс CSS d-none динамически добавляется и удаляется.когда пользователь перемещается среди объектов.Мы используем содержимое атрибута id, чтобы получить индекс видимого в данный момент атрибута.

0 голосов
/ 24 мая 2018

после отправки 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.

...