easyui-datagrid中批量删除功能的实现

向右看齐 2022-04-12 09:44 239阅读 0赞

## easyui-datagrid中批量删除功能的实现过程： ##

**1.在表格中加上【复选框】一项**

简单例子：

**2.设置调用复选框方法【实现多选】**

**3.js代码实现将选中行的id传递给后台**

$(function () {
    // 当前台中有    data-method="自定义方法名"  这个属性时，就会调用此方法，这里我们定义，方法名为：remove
     $("*[data-method]").on("click", function() {
            //$(this).attr("data-method");
            //拿到method的名称  这是HTML5的新特性
            var methodName = $(this).data("method");
            //调用相应的方法
            util[methodName]();
        });
    
    window.util = {
     remove: function () {
                // 调用datagrid中的选择方法，看是否有选中行  getSelections 返回一个数组
                var mySelect = myData.datagrid('getSelections');
    
                // 定义字符串，通过将id构成字符串传递过去，然后在后台解析
                var ids = "";
                //拼接字符串
                for (var i = 0; i < mySelect.length; i++) {
                    ids += mySelect[i].id;
                    // 只要不是最后一个数据，我们都追加添加一个 逗号
                    if(i<mySelect.length-1){
                        ids+=",";
                    }
                }
                // 判断是否选中
                if(mySelect&&ids!=""){
                    $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                        if (r){
                        //将数据传到指定路径，同时将拼接的id值传递过去
                            $.get("/employee/delete",{"ids":ids},function(result){
                                if(result.success){
                                    // 删除成功就重新加载一次  reload在本页重新加载
                                    myData.datagrid('reload');
                                }else {
                                    /*显示警告窗口。参数：
                                    title：在头部面板显示的标题文本。
                                    msg：显示的消息文本。
                                    icon：显示的图标图像。可用值有：error,question,info,warning。
                                    fn: 在窗口关闭的时候触发该回调函数*/
                                    $.messager.alert('错误信息',result.msg,'error');
                                }
    
                            },"json")
                        }
                    });
                } else {
                    $.messager.alert('警告','兄弟,请选中后再删除!','error');
                }
            }
    }

**4.后台代码实现**

@Controller
    @RequestMapping("/employee")
    public class EmployeeController extends BaseController {
    // spring中自动注入对象
    	@Autowired
        private IEmployeeService employeeService;
    
    // 用于删除
        @RequestMapping("/delete")
        @ResponseBody
        public ResultMap delete(String  ids){
    
            try {
    
                // 将获得字符解析成一个字符串数组
                String[] split = ids.split(",");
                // 遍历数组，并且将 字符串 转换成 Long
                for (String s : split) {
                    long id = Long.parseLong(s);
                    // 调用删除方法
                    employeeService.delete(id);
                }
    
            } catch (Exception e) {
                e.printStackTrace();
                // 失败则返回false
                return new ResultMap(false,e.getMessage());
            }
            return new ResultMap();
        }
    }

**5.测试结果**  
选中几项开始测试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70]删除后结果表明批量删除成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70]: /images/20220412/b943c6224b004128a7b065de03dd33bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 1]: /images/20220412/f8647082d54648aab25fb11dd8ff795b.png