DataGrid组件是网页中会经常使用到的一种EasyUi组件。对它的操作就是对一些数据基本的增删改查。
这里讲的就是删除方面。
单行的数据删除都非常简单,也易于掌握。但是在实际的业务当中,还需要提供多行删除的功能,以达到页面操作更顺畅、更加方便和更功能化的作用。
以上都是基本说辞,可以忽略不看。
现在进入主题。删除
我在这使用的是SSSDJ集成框架。Spring+SpringMVC+SpringDataJpa
一、单行删除数据的代码:
$(function () {
//常用的控件先获取
var employeeDataGrid =$("#employeeDataGrid");
//以上的都不重要,下面才是具体的方法。
delete(){
//1.查看是否选中一行
var row=employeeDataGrid.datagrid("getSelected");
//2.如果没有选中行就给出提示
if(!row){
$.messager.alert('错误','请选择一行再操作','info')
return;
}
//3.选中的话,弹出提示框请用户确认是否删除
$.messager.confirm('提示','确认是否删除',function (r) {
if(r){
//4.确认删除,后台进行删除.通过ajax请求。后台执行路径,{id:row.id}:获取到字段id,执行成功后的回调函数
$.get("/employee/delete",{id:row.id},function (result) {
//判断拿到回调函数的字段值是true还是false
if(result.success){//执行的回调函数带过来的对象。通过对象.字段拿到值
//true:成功删除后刷新页面
employeeDataGrid.datagrid("reload");
}else{
//false:把失败信息做一个提示在消息框中。拿到对象中的字段msg值。后台代码是通过e.getMessage()封装的
$.messager.alert('提示',`错误删除信息:${result.msg}`,'info');
}
})
}
})
},
}
二、多行删除数据代码
先将数据表格DataGrid中的属性singleSelect : false 改为false,使数据支撑多选
然后在DataGrid中添加一个复选框,代码如下:
<%--onRowContextMenu:showMenu: onRowContextMenu是DataGrid数据表格的事件(在鼠标右击一行记录的时候触发)
showMenu:事件名称。用于写js代码实现这个方法
singleSelect:false 改为false,支持多选
--%>
<table id="employeeDataGrid" class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'/employee/page',fit:true,fitColumns:true,singleSelect:false,onRowContextMenu:showMenu,
pagination:true,toolbar:'#gridToolBar'
">
<thead>
<tr>
<%--准备多选要使用的复选框--%>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'headImage',width:100,formatter:formatImg">头像</th>
<th data-options="field:'username',width:100">用户名</th>
<th data-options="field:'password',width:100">密码</th>
<th data-options="field:'email',width:100">邮件</th>
<th data-options="field:'age',width:100">年龄</th>
<th data-options="field:'department',width:100,formatter:formatName">部门</th>
</tr>
</thead>
</table>
马上进入正题--------多选删除实现功能
先来一波易懂的图片解释;
删除这两行数据,当然也可以再多删。
达到的效果图
js代码部分:
大概流程解释一波:
使用DataGrid组件的getSelections方法,当你选择行数时,它会返回一个数组形式的数据给你,如果没有选择,数组就是空值。
然后使用ES6新的语法遍历这个数组,拿到对象,然后就拿到对象的id了。然后将id循环通过ajax请求带到后台去删除就OK了。
//删除按钮的事件--支持一行和多行删除
delete(){
//1.查看是否选中。getSelections方法:如果选中多行会返回一个数组,否则返回一个空数组
var rows=employeeDataGrid.datagrid("getSelections");
//打印一下。得到的全是选中的行的数据
// console.debug(rows)
//2.如果没有选中行就给出提示。数组rows的长度不能为0。
if(rows.length<1){
$.messager.alert('错误','请选择一行再操作','info')
return;
}
//3.选中的话,弹出提示框请用户确认是否删除
$.messager.confirm('提示','确认是否删除',function (r) {
if(r){
//循环遍历数组,根据id进行循环删除。ES6新语法---用of得到i为数组对象;如果用in,得到的只是对象的下标
for(let i of rows){
//打印一下:根据获得的对象拿到对象的id
// console.debug(i.id);
//4.确认删除,后台进行删除.通过ajax请求。后台执行路径,{id:i.id}:获取到字段id,执行成功后的回调函数
$.get("/employee/delete",{id:i.id},function (result) {
//判断拿到回调函数的字段值是true还是false
if(result.success){//执行的回调函数带过来的对象。通过对象.字段拿到值
//true:成功删除后刷新页面
employeeDataGrid.datagrid("reload");
}else{
//false:把失败信息做一个提示在消息框中。拿到对象中的字段msg值。后台代码是通过e.getMessage()封装的
$.messager.alert('提示',`错误删除信息:${result.msg}`,'info');
}
})
}
}
})
},
后台Controller部分
//删除功能---JsonResult类中有success=true和msg字段,是要成功后通过ajax带到后台去处理的
@RequestMapping("/delete")
@ResponseBody//返回json数据
public JsonResult delete(Long id){
//处理下删除异常
try {
iEmployeeService.delete(id);
} catch (Exception e) {
e.printStackTrace();
//有异常。传个false,并且e.getMessage将异常信息传给前台
return new JsonResult(false,e.getMessage());
}
//没有异常。直接返回给前台
return new JsonResult();
}
以上就是多行选择然后删除的代码及思路。