当一个页面有多个模块,最好的方式是:将每个模块抽离成一个单独的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代码
})
}