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

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

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

<th data-options="field:'ck',checkbox:true"></th>     <%--这一项就是复选框--%>

简单例子：

<table class="easyui-datagrid" id="myData"
       data-options="url:'/employee/page',
       fitColumns:true,
       singleSelect:true,
       fit:true,
       rownumbers:true,
       pagination:true,
">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'headImage',width:100,formatter:imgFormat">头像</th>
        <th data-options="field:'username',width:100,align:'center',sortable:true,calcable:true">用户名</th>
        <th data-options="field:'password',width:100,align:'center'">密码</th>
        <th data-options="field:'email',width:100,align:'center',sortable:true,calcable:true">邮箱</th>
        <th data-options="field:'age',width:100,align:'center',sortable:true,calcable:true">年龄</th>
        <th data-options="field:'department',width:100,align:'center',sortable:true,formatter:deptFormat">部门</th>
        <th data-options="field:'roles',width:100,align:'center',formatter:rolesFormat">角色</th>
    </tr>
    </thead>
</table>

 <%--这是单独定义的删除按钮--    data-method="remove"  是用于js中方便调用此方法%>
 <a class="easyui-linkbutton" data-method="remove" iconCls="icon-remove" plain="true" href="javascript:;">删除</a>

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

 <span>选择模式: </span>
    <select onchange="$('#myData').datagrid({singleSelect:(this.value==0)})">
        <option value="0">单选</option>
        <option value="1">多选</option>
    </select><br/>

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.测试结果
选中几项开始测试：
删除后结果表明批量删除成功：