可能看到标题的你没有明白我到底想表达啥?(我起名字时删改多遍,这是最终定下来的),不过,为了让大家看的明白,我专门去做了个演示视频:
演示案例使用的技术:ssh框架+layui表格,即简单的对单表数据做了个增删改查。
相信大家看过视频之后,已经知道大体的业务流程,我在这里在简单的说明一下。
1.默认进入首页default.jsp,进入该页面之前将所有数据查询出来,在控制器中放入对象集合,在页面上直接遍历数据即可。
控制器中的代码:
//查询全部年级
public String getGradeAll(){
gradeList = gradeService.getGradeAll();
return "success";
}
default.jsp中的主要代码:
<table class="layui-table admin-table">
<thead>
<tr>
<th style="width: 30px;">
<input type="checkbox" lay-filter="allselector" lay-skin="primary">
th>
<th>编号th>
<th>名称th>
<th>操作th>
tr>
thead>
<tbody id="content">
<c:forEach items="${gradeList }" var="grade">
<tr>
<td style="width: 30px;">
<input type="checkbox" lay-filter="allselector" lay-skin="primary">
td>
<td>${grade.gid }td>
<td>${grade.gname }td>
<td>
<a href="javascript:void up(${grade.gid }) ;" id="update" class="layui-btn layui-btn-warm layui-btn-small">修改a>
<a href="delGradeById?gid=${grade.gid }" class="layui-btn layui-btn-danger layui-btn-small">删除a>
td>
tr>
c:forEach>
tbody>
table>
点击添加的按钮:
利用layui自带的好看弹出层,弹出来一个添加的页面层,代码如下:
添加的按钮:
class="layui-elem-quote">"javascript:;" class="layui-btn layui-btn-small" id="add">class="layui-icon"> 添加信息
按钮事件:
/* 添加弹出页面 */
$("#add").click(function(){
layui.use('layer', function(){
var layer = layui.layer;
/* 弹出一个页面 */
layer.open({
type: 2,
content: 'saveGrade.jsp' //弹出来一个添加年级的页面
});
});
});
添加页面的代码:
class="layui-form" action="" id="forms"><div class="layui-form-item"><label class="layui-form-label">年级名称label><div class="layui-input-block"><input type="text" name="grade.gname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">div>div><div class="layui-form-item"><div class="layui-input-block"><button id="save" class="layui-btn" lay-submit="" lay-filter="demo1">添加button><button type="reset" class="layui-btn layui-btn-primary">重置button>div>div>form>
点击添加时,利用ajax异步刷新,可以避免添加的弹出层关不掉,或者查询全部的数据没有及时更新,下面是添加时主要的代码:
<script type="text/javascript" src="js/jquery-1.8.3.js">script>
<script type="text/javascript">
$(function(){
$("#save").click(function(){
//执行添加的操作ajax
$.ajax({
cache:true,
type:"post",
url:"saveGrade",
data:$("#forms").serialize(),
async:false,
success:function(){
window.parent.location.href="getGradeAll";
}
})
});
})
script>
这个问题当时上网查找了好久没有解决掉,最后试着使用ajax结合网上的其他解决方法才得以解决。
后面的修改和添加的方法也是一样的。