思维导图：

 一、增加

1.增加一个新增按钮

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

 提交表单、窗体关闭、提交数据表格

function submitForm(){
	/**
	 * 点击确定按钮提交表单到后台，并且是新增/修改共用的一个方法
	 */
//	获取选择的数据
	var row=$('#dg').datagrid("getSelected");
	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){
//			alert(data);
			if(data==1){
				$("#dd").dialog("close");
				$('#dg').datagrid('reload');
				
			}
		}
	});
}

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) {
				e1.printStackTrace();
			}
		}
		return null;
	}

 

 

二、删除

1.datagrid添加一列“删除”

2.删除的点击事件

3.向后台发送删除请求

function del(){
	var row=$('#dg').datagrid("getSelected");
	if(row){
		var id=row.bid;
//		message不能向后台发送请求
		$.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("请选择需要删除的数据");
	}
}

BookDao:

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

BookAaction:

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) {
				e1.printStackTrace();
			}
		}
		return null;
	}

 

三、批量删除

1.添加批量删除按钮

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

//    批量删除的点击事件
    $("#btn-batchDel").click(function(){
        var rows=$('#dg').datagrid("getSelections");
//        用于存放id
        var ids=new Array();
        if(rows !=null && rows.length>0){
            for(var i in rows){
                ids.push(rows[i].bid);
            }
        }
        if(ids.length >0){
            $.ajax({
                   url:$("#ctx").val()+'/book.action?methodName=dels&bids='+ids.join(","),
                   success:function(data){
                       if(data ==1){
                           $("#dg").datagrid("reload");
                       }
                   }
               });
        }
    });

 

public String dels(HttpServletRequest req, HttpServletResponse resp) {
        try {
        String ids=req.getParameter("bids");
        String id[]=ids.split(",");
        for (String d : id) {
            book.setBid(Integer.parseInt(d));
            bookDao.del(book);
        }
//         删除成功返回1
         ResponseUtil.writeJson(resp, 1);
        } catch (Exception e) {
            e.printStackTrace();
            try {
//                删除失败返回0
                 ResponseUtil.writeJson(resp, 0);
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return null;
    }