Easyui——datagrid的新增和删除

 

一、新增

1、添加新增按钮（userManage.jsp）

<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>

2、给新增按钮添加点击事件

$("#btn-add").click(function() {
        //清空之前表单的数据
        $('#ff').form('clear');
        $("#dd").dialog("open");
        addFlag=1;
    })

3、var一个变量判断是增加还是修改

因为和修改的窗体是一个，所以需要区分是增加还是修改，变量默认为0，点击修改则为1，点击新增则为0.

var addFlag=0;

4、表单提交的事件

function submitForm() {
    /*
     * 点击确定按钮提交表单到后台，并且是新增/修改共用的一个方法
     */
    var href=null;
    if(addFlag==2){
//修改
        href=$("#ctx").val()+'/book.action?methodName=edit'
    }else if(addFlag==1){
//增加
        href=$("#ctx").val()+'/book.action?methodName=add'
    }
    $('#ff').form('submit', {
        url:href,    
        success: function(data){
            if(data==1){
                $("#dd").dialog("close");
                $('#dg').datagrid('reload');
            }
        }
    });
 
}

5、写dao方法和web

①、BookDao

//    增加
    public void add(Book book) throws Exception {
        book.setBid((int)new Date().getTime());
        super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
    }

②、BookAction

public String add(HttpServletRequest req, HttpServletResponse resp)  {
        try {
            bookDao.add(book);
            ResponseUtil.writeJson(resp, 1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        }
        return null;
    }

6.页面展示

 二.删除

1、单个删除

①、在datagrid添加一列删除 

 columns:[[  
            {field:'ck',checkbox:true},  
            {field:'bid',title:'id',width:100},    
            {field:'bname',title:'名称',width:100},    
            {field:'price',title:'价格',width:100},
            {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
                return '<a href="javascript:void(0);" onclick="edit();">修改</a>&nbsp;&nbsp;
                    < a href="javascript:void(0);" onclick="del();">删除</a>'
            }}    
 
        ]]    

②、添加删除的方法

Messager组件并不能直接向后台发送请求，可以使用ajax发送请求

function del() {
    var row=$('#dg').datagrid("getSelected");
    if(row){
        var id=row.bid;
//        messager不能向后台发送请求
        $.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
            if (r){    
                $.ajax({
                    url:$("#ctx").val()+'/book.action?methodName=del&bid='+id,
                    success:function(data){
                        if(data==1){
                            $('#dg').datagrid('reload');
                        }
                    }
                });
            }    
        });  
    }else{
        alert("请选择要删除的数据");
    }
}

③、dao方法

BookDao

//    删除
    public void del(Book book) throws Exception {
        super.executeUpdate("delete from t_mvc_book where bid=?", book, new String[] {"bid"});
    }
④、BookAction

public String del(HttpServletRequest req, HttpServletResponse resp)  {
        try {
            
                bookDao.del(book);
            ResponseUtil.writeJson(resp, 1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        }
        return null;
    }

④、效果

点击删除时（须选中）

 

2、批量删除

①、添加批量删除按钮（userManage.jsp）

<a id="btn-batchDel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">批量操作</a>

②、增加复选框

$('#dg').datagrid({    
        url:$("#ctx").val()+'/book.action?methodName=datagrid',    
        pagination:true,
        fitColumns:true,
//        添加复选框
        checkbox:true,
        toolbar: '#tb',
        columns:[[  
//        设置复选框的列
            {field:'ck',checkbox:true},  
 
            {field:'bid',title:'id',width:100},    
            {field:'bname',title:'名称',width:100},    
            {field:'price',title:'价格',width:100},
            {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
                return '<a href="javascript:void(0);" onclick="edit();">修改</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="del();">删除</a>'
            }}    
 
        ]]    
    });  

③、添加一个批量删除的点击事件

 

   $("#btn-batchDel").click(function() {
        var rows=$('#dg').datagrid("getSelections");
        var ids=new Array();
        if(rows !=null&& rows.length >0){
            for (var i in rows) {
                ids.push(rows[i].bid)
            }
        }
        if(ids.length>0){
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
                if (r){    
                    $.ajax({
                        url:$("#ctx").val()+'/book.action?methodName=del&bids='+ids.join(","),
                        success:function(data){
                            if(data==1){
                                $('#dg').datagrid('reload');
                            }
                        }
                    });
                }    
            });  
        }
    });

④、修改BookAction代码

public String del(HttpServletRequest req, HttpServletResponse resp)  {
        try {
            String ids = req.getParameter("bids");
            String[] split = ids.split(",");
            for (String s : split) {
                book.setBid(Integer.parseInt(s));
                bookDao.del(book);
            }
            ResponseUtil.writeJson(resp, 1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        }
        return null;
    }

 ⑦、效果

 点击确认

 OK