【java web】springMVC框架实现用多选框批量删除表数据功能
2017-06-06 23:06
1176 查看
本功能是基于springMVC+mybatis框架实现的,实现过程如下:
jsp代码: <c:forEach items="${requestScope.movies}" var="movie" varStatus="status">
<tr>
<td><input type="checkbox" id="subcheck"
name="subcheck" value="${movie.id}" /></td>
<td>${status.count }</td>
<td>${movie.id}</td>
<td>${movie.name }</td>
<td>${movie.classify}</td>
<td>${movie.price}</td>
<td>${movie.bid}</td>
<td>${movie.num}</td>
<td>${movie.num_sale}</td>
<td>${movie.score}</td>
<td>${movie.note}</td>
<td>${movie.time}</td>
<td><a href="movie/${movie.id}">修改</a></td>
</tr>
</c:forEach>
代码解释:在EL表达式的循环体中添加<input type="checkbox" id="subcheck" name="subcheck" value="${movie.id}" />,该行代码表示为为每条数据增加一个多选框,其中value属性可根据实际情况改动,但一定要是数据库中主键值,如果不是会出现bug
添加一个删除按钮,onclick属性为batchDeletes():
<button onclick="batchDeletes()">删除</button>
js代码:
<script type="text/javascript">
function batchDeletes(){
//判断至少写了一项
var checkedNum = $("input[name='subcheck']:checked").length;
if(checkedNum==0){
alert("请至少选择一项!");
return false;
}
if(confirm("确定删除所选项目?")){
var checkedList = new Array();
$("input[name='subcheck']:checked").each(function(){
checkedList.push($(this).val());
});
$.ajax({
type:"POST",
url:"del",
data:{"delitems":checkedList.toString()},
datatype:"html",
success:function(data){
$("[name='checkbox2']:checkbox").attr("checked",false);
location.reload();//页面刷新
},
error:function(data){
art.dialog.tips('删除失败!');
}
});
}
}
</script>代码解释:当点击删除按钮后执行该方法,该段代码表示将已选的多选框通过ajax发送给后台,本例中url设为del,在实际代码编写中可以改变,但需和后台地址一致
后台Controller代码:
@RequestMapping("/del")
public void batchDeletes(HttpServletRequest request, HttpServletResponse response) {
String items = request.getParameter("delitems");// System.out.println(items);
String[] strs = items.split(",");
for (int i = 0; i < strs.length; i++) {
try {
int a = Integer.parseInt(strs[i]);
persistService.delStudentById(a);
} catch (Exception e) {
}
}
}从前台勾选的选择框中传过来的值用“,”分开并存入strs数组,将strs数组中的字符强制转换为int类型(主键需要,主键不为int类型可以跳过此步),然后通过调用.delStudentById()函数删除数据库中所有以该数组作为元素的数据,其中delStudentById()函数是在service层定义的,作用是通过数据的Id删除对应的数据,在实际使用中可根据个人需要来调用相应的删除方法。
实现效果如下:
jsp代码: <c:forEach items="${requestScope.movies}" var="movie" varStatus="status">
<tr>
<td><input type="checkbox" id="subcheck"
name="subcheck" value="${movie.id}" /></td>
<td>${status.count }</td>
<td>${movie.id}</td>
<td>${movie.name }</td>
<td>${movie.classify}</td>
<td>${movie.price}</td>
<td>${movie.bid}</td>
<td>${movie.num}</td>
<td>${movie.num_sale}</td>
<td>${movie.score}</td>
<td>${movie.note}</td>
<td>${movie.time}</td>
<td><a href="movie/${movie.id}">修改</a></td>
</tr>
</c:forEach>
代码解释:在EL表达式的循环体中添加<input type="checkbox" id="subcheck" name="subcheck" value="${movie.id}" />,该行代码表示为为每条数据增加一个多选框,其中value属性可根据实际情况改动,但一定要是数据库中主键值,如果不是会出现bug
添加一个删除按钮,onclick属性为batchDeletes():
<button onclick="batchDeletes()">删除</button>
js代码:
<script type="text/javascript">
function batchDeletes(){
//判断至少写了一项
var checkedNum = $("input[name='subcheck']:checked").length;
if(checkedNum==0){
alert("请至少选择一项!");
return false;
}
if(confirm("确定删除所选项目?")){
var checkedList = new Array();
$("input[name='subcheck']:checked").each(function(){
checkedList.push($(this).val());
});
$.ajax({
type:"POST",
url:"del",
data:{"delitems":checkedList.toString()},
datatype:"html",
success:function(data){
$("[name='checkbox2']:checkbox").attr("checked",false);
location.reload();//页面刷新
},
error:function(data){
art.dialog.tips('删除失败!');
}
});
}
}
</script>代码解释:当点击删除按钮后执行该方法,该段代码表示将已选的多选框通过ajax发送给后台,本例中url设为del,在实际代码编写中可以改变,但需和后台地址一致
后台Controller代码:
@RequestMapping("/del")
public void batchDeletes(HttpServletRequest request, HttpServletResponse response) {
String items = request.getParameter("delitems");// System.out.println(items);
String[] strs = items.split(",");
for (int i = 0; i < strs.length; i++) {
try {
int a = Integer.parseInt(strs[i]);
persistService.delStudentById(a);
} catch (Exception e) {
}
}
}从前台勾选的选择框中传过来的值用“,”分开并存入strs数组,将strs数组中的字符强制转换为int类型(主键需要,主键不为int类型可以跳过此步),然后通过调用.delStudentById()函数删除数据库中所有以该数组作为元素的数据,其中delStudentById()函数是在service层定义的,作用是通过数据的Id删除对应的数据,在实际使用中可根据个人需要来调用相应的删除方法。
实现效果如下:
相关文章推荐
- JAVA_WEB项目之Lucene检索框架实现增删查改的代码优化以及分页功能实现
- 完整使用SSM框架(Spring SpringMVC Mybatis)搭建web服务器实现登录功能
- JAVA应用XFire框架来实现WebServie的大文件传输功能之一(下载)
- JAVA应用XFire框架来实现WebServie的大文件传输功能之一(下载)
- 从零开始写javaweb框架笔记15-搭建轻量级JAVAWEB框架-实现依赖注入功能
- 死亡历险,翻开新的一篇之Delphi 连接 JAVA WebService,并实现查找,添加,修改,删除等功能
- Node初学者入门,一本全面的NodeJS教程,微小的web框架,能实现文件上传功能以及数据解析功能
- JAVA_WEB项目(结合Servlet+jsp+ckEditor编辑器+jquery easyui技术)实现新闻发布管理系统第三篇:新闻发布,新闻修改,新闻删除功能的实现
- SpringMVC下删除一条数据后重新加载当前页面(已实现分页功能)
- 【从零写javaweb框架】(五)实现依赖注入功能
- JAVA应用XFire框架来实现WebServie的大文件传输功能之二(上传)
- 小案例:实现对web端对客户的添加,编辑,删除等数据功能
- java SpringMVC中 POI读取数据库数据并写入Excel表格中,并实现下载功能
- JavaWeb框架-SpringMVC-4-文件上传与返回JSON数据
- 从零开始写javaweb框架笔记15-搭建轻量级JAVAWEB框架-实现依赖注入功能
- html对select标签实现数据动态增加,删除,修改功能。
- GridView控件与CheckBox结合,实现全选功能,同时实现删除选中的多行数据 .
- web层框架应该大体实现以下功能
- java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)
- java 三层架构 实现数据的显示和分页功能