SpringMVC实现list表单（六）

细心的读者已经注意到了，我们在上节的profilePage的页面中，我们是有ADDTASTE的按钮。那么这个按钮的功能要怎么实现呢？这一节，我们主要就是来学习这个。

1.视图功能

这个按钮将会被显示出来，它允许我们去添加新的keyword的多个这样的值。第一个列表的值可以被修改并按钮可以移除。处理列表的数据表单是一件繁琐的事。不过，我们使用SpringMVC和Thymeleaf将会相对简单了。将下面的代码添加到profilePage.html的文件中。

<!--添加Add Taste的功能-->
<fieldset class="row">
    <legend th:text="#{tastes.legend}">What do you like?</legend>
    <button class="btn teal" type="submit" name="addTaste"
            th:text="#{add.taste}">Add taste
        <i class="mdi-content-add left"></i>
    </button>
    <div th:errors="*{tastes}" class="red-text">Error</div>
    <div class="row" th:each="row,rowStat : *{tastes}">
        <!--rowStat是输入的信息，rowStat.index对应索引的信息-->
        <div class="col s6">
            <input type="text" required="required" th:field="*{tastes[__${rowStat.index}__]}" th:placeholder="#{taste.placeholder}"/>
        </div>
        <div class="col s6">
            <button class="btn red" type="submit" name="removeTaste"
                    th:value="${rowStat.index}" th:text="#{remove}">Remove
                <i class="mdi-action-delete right waves-effect"></i>
            </button>
        </div>
    </div>
</fieldset>

上面这一小片段的代码的目的昌，当用户已经登录时，我们要通过th:each来遍历显示出所有的tastes的值，这就有点像Java中的for…in方法。

通过上面的代码我们可以看出，查找的结果是放在两个部分，而不是一个地方。第一个就是row所包含的数据，第二个就是rowStat包含的信息；这也是当前所填写的信息。我们会比较陌生的是这样的一处代码：th:field="*{tastes[__${rowStat.index}__]}"。你也可以将这个代码看作这样的形式：th:field="*{tastes[rowStat.index]}"。但是如果这样写的话，那就不能运行了。我们来看${rowStat.index}的值，这个就是当前遍历的值，在我们要展示出来之前，就要明确。

2.按钮事件处理

这里有两个新我按钮在我们的页面中，它们都是提交的按钮。早先的那个按钮我们取名为save，而新增加的两个按钮我们分别取名为addTaste和removeTaste.

在我们的控制层，我们要增加函数，而且要更好地来区别按钮的事件。让我们添加下面的代码到profileController。

package masterSpringMVC.profile;

import masterSpringMVC.date.USLocalDateFormatter;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;
import java.util.Locale;

/**
 * Profile后端业务的逻辑处理
 * Created by OwenWilliam on 2016/5/15.
 */

@Controller
public class ProfileController {

    @RequestMapping("/profile")
    public String displayProfile(ProfileForm profileForm)
    {
        return "profile/profilePage";
    }

    /**
     * 信息提交的处理
     * @param profileForm
     * @param bindingResult
     * @return
     */
    @RequestMapping(value="/profile", params = {"save"}, method = RequestMethod.POST)
    public String saveProfile(@Valid ProfileForm profileForm, BindingResult bindingResult)
    {
        //提交信息的错误
        if (bindingResult.hasErrors())
        {
            return "profile/profilePage";
        }
        System.out.println("save ok" + profileForm);
        return "redirect:/profile";
    }

    /**
     * 添加Taste
     * @param profileForm
     * @return
     */
    @RequestMapping(value = "/profile", params = {"addTaste"})
    public String addRow(ProfileForm profileForm)
    {
        profileForm.getTastes().add(null);
        return "profile/profilePage";
    }

    /**
     * 删除已经添加的Taste
     * @param profileForm
     * @param req
     * @return
     */
    @RequestMapping(value = "/profile" , params = {"removeTaste"})
    public String removeRow(ProfileForm profileForm, HttpServletRequest req)
    {
        Integer rowId = Integer.valueOf(req.getParameter("removeTaste"));
        profileForm.getTastes().remove(rowId.intValue());
        return "profile/profilePage";
    }

    /**
     * 获取要提示用户输入的日期格式
     *  @ModelAttribute("dateFormat")就是映射到前端
     * @param locale
     * @return
     */
    @ModelAttribute("dateFormat")
    public String localeFormat(Locale locale)
    {
        return USLocalDateFormatter.getPattern(locale);
    }
}

当然为了区分我们是在添加Taste，还是提交 用户的信息，所以还需要我们在视图页面添加JavaScript的代码。

<!--只有提交submit的按键时才会提交，其它的情况是添加Teste   有了bug-->
<script layout:fragment="script">
    $('button').bind('click', function(e) {
        if (e.currentTarget.name === 'save') {
            $(e.currentTarget.form).removeAttr('novalidate');
        } else {
            <!--添加无作用的标签novalidate-->
            $(e.currentTarget.form).attr('novalidate', 'novalidate');
        }
    });
</script>

3.总结

这一章节，我们实现了原告没有实现 的按钮。这个按钮也是用SpringMVC来添加list列表的信息。最后结果如下：

源码路径：git@github.com:owenwilliam/masterSpringMVC.git