1

基本上到目前为止，我有一个 JSP 页面，管理员可以在一个简单的表格中查看所有当前注册的用户。然后，当单击特定表行的“更新”按钮时，管理员可以更新用户信息（权限、电子邮件等）。

我想知道如何使弹出模式出现在屏幕上，并显示一个表单并在其中显示当前用户信息，而不是将其重定向到另一个页面并购买表单。是否有任何好的教程展示如何实现这种类型的功能？

我正在基于 Spring 框架构建这个 Web 应用程序。到目前为止，这是我的 JSP 页面。为了测试，我只制作了一个名为 Ajax 测试的按钮，虽然我真的希望我的“更新”按钮实例化一个模式并加载用户信息。

<c:forEach var="user" items="${users}">
        <tr>
            <td><c:out value="${user.id}" /></td>
            <td><c:out value="${user.name}"/></td>
            <td><c:out value="${user.username}"/></td>
            <td><c:out value="${user.email}"/></td>
            <td><c:out value="${user.dob}"/></td>
            <td><c:out value="${user.authority}"/></td>
            <td>
                <a id="update" href="<c:url value="/viewUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Update</button></a>
            </td>
            <td>
                <a id="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Delete</button></a>
            </td>
            <td>
                <a id="loadUser" href="<c:url value="/ajaxTest"><c:param name="id" value="${user.id}"/></c:url>"><button>Ajax Test</button></a>
            </td>
        </tr>
    </c:forEach>
</table>
 <div id="personIdResponse"> </div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#loadUser").click(function(){
            var personId = +$('#loadUser').val();
            $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId, function(user) {
                  $('#personIdResponse').text(user.name + ', = username ' + user.username);
                });
        });
    });
</script>

这是我的控制器：

@RequestMapping("/viewUser")
public String updateUser(Model model, @RequestParam(value = "id", required = false) Integer id) {

    User user = usersService.getUser(id);

    model.addAttribute("user", user);

    return "settings";
}

@RequestMapping("/ajaxTest")
@ResponseBody
public User ajaxTest(@RequestParam(value = "id", required = false) Integer id) {
    return usersService.getUser(id);
}

@RequestMapping("/updateUser")
public String updateUser(Model model, User user) {

    usersService.updateUser(user);
    getUsers(model);
    return "users";
}

@Secured("ROLE_ADMIN")
@RequestMapping("/deleteUser")
public String deleteUser(Model model,
        @RequestParam(value = "id", required = false) Integer id) {

    if (id == null) {
        List<User> users = usersService.getUsers();

        model.addAttribute("users", users);
        return "users";
    } else {
        usersService.delete(id);

        List<User> users = usersService.getUsers();

        model.addAttribute("users", users);
        return "users";
    }

}

我无法在显示的设置文本中得到任何内容

4

1 回答 1

1

请考虑 jQueryUI 对话框形式。请参阅此处的示例。

您的 HTML 将是：

<div id="dialog-form" title="user update">
<form>
    <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    ... some other properties
    </fieldset>
 </form>
 </div>

你的JavaScript：

$("btn.update")
  .click(function() {
    $("input#name").val('the name of the user'); // you should be able to retrieve the info or id based on the row. Use changed selectors like closest("tr").find("td").eq(2)...
    $("#dialog-form" ).dialog( "open" );
  });

更新：

我注意到问题中发布了更多代码。

第一个问题，你真的不应该给id更新，删除超链接。由于它们在多行中重复，因此您将拥有带有 duplicated 的 DOM 元素id。所以，请考虑使用class.

然后，这是使用来自服务器的数据填充对话框表单的方法。

$(".loadUser").click(function(e){
        e.preventDefault(); // to cancel the default hyperlink behavior.
        var personId = +$(this).val(); // obtain the user Id.
        $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId)
             .done(function(user) {
                  // populate the dialog form with data retrieved.
                  $("input#name").val(user.username); 
                  ...

                  // display the dialog form
                  $("#dialog-form" ).dialog( "open" );
              })
              .fail(function(user) {
                  alert('could not load user');
              });
    });
于 2013-09-28T04:32:35.613 回答