JSP多个模块时解决方法

当一个页面有多个模块，最好的方式是：将每个模块抽离成一个单独的JSP。 界面简洁，易于查询问题所在。

(1)场景一
只有多个模块，不存在动态生成模块

JSP
<%@page prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="/admin/notice/noticeList"></c:import>


Java

@Controller
@RequestMapping("/admin/notice")
public class ActivityNoticeController {
    @RequestMapping(value="noticeList") {
        ...

        return "live/ActivityNotice"; //这里返回的是一个页面，前提是xml文件定义拦截格式
    }
}

场景二
页面有多个模块，有动态生成部分

例如：

javascript
<script type="javascript/text" src="../static/js/jquery.1.11.3.js">

$(function() {
    $('.btn').click(function(){
        var str = '';
        for(var i=0; i<5; i++) {
            str += '<option id='+i+'>'+(index+i)+'</option>';
        }
        $('.ul').html(str);
    })
})

若有动态生成的html表单元素需要有选中事件：

两种解决方案：
(1)界面中html代码部分触发事件的方式，都使用function的方式
(2)在抽离的模块html部分，重新对事件进行添加

(1)绑定function方式

例如：

JSP

<table>
    <tr>
        <th>姓名</th>
        <th>信息</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>测试</td>
        <td>test</td>
        <td>
            <button class="edit" onclick="javascript:edit(this)">编辑</button>
            <button class="view" onclick="javascript:view(this)">查看</button>
            <button class="del" onclick="javascript:delete(${course.id})">删除</button>
        </td>
    <tr>
</table>

Javascript

function edit(){
    ...
}

...

这样的方式，无论动态html代码如何生成。在生成的html中，总绑定了对事件的调用。可以保证动态元素生成时，不会造成元素绑定的丢失

(2)在模块页面重新对元素进行绑定

例如：

JSP

<table>
    <tr>
        <th>姓名</th>
        <th>信息</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>测试</td>
        <td>test</td>
        <td>
            <button class="edit">编辑</button>
            <button class="view">查看</button>
            <button class="del">删除</button>
        </td>
    <tr>
</table>

Javascript
$(function(){

    1.使用jquery中的on元素进行动态绑定
    $('.edit').on('click',function(){
        ...
    })

    2.关闭元素绑定，并进行新的绑定
    $('.view').off('click').click(function(){
        ...
    })

    //两种都可
})

这样的方式也能够保证动态生成Html代码部分可以绑定元素事件。

相比较而言：第一种方式更加优雅

场景三
页面有多个模块、每个模块动态生成、每个模块中有元素绑定增删改查、分页等功能

其他需要解决的是：
(1)增删改查不能够刷新页面，以免造成菜单栏跳回课程安排

(2)分页不能乱(当前第几页刷新后还是第几页)

解决方案：

1.增删改都使用异步操作

    @ResponseBody
    @RequestMapping(value="save")
    public String save(Entity entity) {
        JsonObject obj = new JsonObject();
        ...
        Entity e = service.save(entity);
        obj.put("entity", e);
        ...
        return obj.toString();
    }

    ...

2.进行完异步操作之后，重新对模块页面进行动态刷新。

page记录当前是第几页。通过查询返回异步操作后，第几页的记录。

function search(page) {
    $.post('/admin/notice/noticeList', {'page':page},function(d){
        $('.div').html(d); //返回的是页面拼装的html代码
    })
}