【EasyUi DataGrid】之批量删除

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();
    }

以上就是多行选择然后删除的代码及思路。