Question

您好。

我试图将Spring MVC与bootstrap模式集成 - 有过滤区域我想从模态形式中选择项目并通过jQuery ajax将其设置为过滤器。
主要思路：当用户点击按钮选择项目时显示模态弹出窗口，此弹出窗口必须允许用户在列表中搜索（ajax）并单击提交按钮以选择项目。
要刷新弹出数据，我返回带有过滤项目列表的ModelAndView，然后，如果用户单击“提交”，我将所选索引发送到服务器，我可以在列表中通过索引获取id，但ModelMap（和模型也）不包含这个清单。
我做错了什么？

我有以下结构：

主要JSP：

main.jsp中

 ....
 <div class="override side-nav raised" id="filter">
     <jsp:include page="filter.jsp"/>
 </div>
 ....

filter.jsp

<f:form method="get" cssClass="search" action="${pageContext.request.contextPath}/search"
    commandName="searchModel">
    ....
    <div class="form-group">
        <label class="control-label" for="searchDpt"><s:message code="label.department"/></label>

        <div class="controls">
            <f:input id="searchDpt" cssClass="form-control col-sm-8" cssStyle="width: 75%;" path="dept"/>
            <button type="button" id="dsb_filter" class="btn btn-default col-sm-3" data-toggle="modal" data-target="#selectDeptModal"><span
                    class="glyphicon glyphicon-list"></span></button>
        </div>
    </div>
    ....
</f:form>

项目选择的模态窗口：

modal.jsp

<div id="selectDeptModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    style="display: none;">
    ....
    <div class="table-responsive" id="dept_table">
        <jsp:include page="deptTable.jsp"/>
    </div>
    <button type="button" class="btn btn-default" onclick="selectDept();"><s:message code="label.select"/></button>
</div>

用于ajax搜索和POSTing数据的jQuery代码：

function search() {
    $.ajax({
        url: "departments",
        data: "name=" + $("#dpt_filter").val(),
        success: function (response) {
            $("#dept_table").html(response);
        }
    });
}

function getSelectedIndex() {
    var table = $("#dept_table").find("table")
    var selectedRows = table.find("tr.selected-row");
    var elements = [];
    if (selectedRows.length > 0) {
        table.find("tr.selected-row td.index-col").each(function (i, el) {
            elements.push(parseInt($(el).text()));
        });
    }
    return elements;
}

function selectDept() {
    var selected = getSelectedIndex()[0];

    if (selected == undefined || selected.length == 0) {
        $("#no_selection").removeClass("hidden");
        return;
    }

    $('#selectDeptModal').modal('hide');
    $.ajax({
        type: "POST",
        url: "deptSelected",
        data: { index: selected},
        success: function (response) {
            $("#filter").html(response);
        }
    });
}

用于处理JavaScript的控制器方法：

@RequestMapping(method = RequestMethod.GET, value = "departments")
public ModelAndView getDepartments(@RequestParam(required = false) String name, Model model) {
    LOG.debug(name);
    model.addAttribute("dpts", departmentService.filterByName(name));
    return new ModelAndView("selectDeptDialog/deptTable");
}

@RequestMapping(method = RequestMethod.POST, value = "deptSelected")
public ModelAndView deptSelected(@RequestParam Long index, ModelMap model) {
    SearchModel sModel = (SearchModel) model.get("searchModel");
    sModel.setDept(index);
    Object depts = model.get("dpts");// = null

    return new ModelAndView("filter", model);
}

但是当获得deptSelected中的部门列表时，它是null。

提前致谢！

Answer 1

ModelMaps不会在请求之间保持状态。但是，您可以使用@SessionAttribute获得一些相同的结果，但是，我认为这不会得到您想要的结果。

Spring MVC ModelAndView属性

main.jsp中

filter.jsp

modal.jsp

1 个答案: