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代码 }) }