easyUI之增加删除与批量删除

 一、增加
1、添加一个增加按钮

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

 2、写增加的Dao方法及子控制器内的方法
 

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

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

3、在js文件中设置个值，用于方法的跳转

var addFlag=0;

 4、在js文件中添加增加的点击事件（清除表单数据，打开增加窗口）

$("#btn-add").click(function(){

// 清除表单数据

$('#ff').form('clear');

// 打开窗口

$("#dd").dialog("open");

// 设置值用于判断跳转方法

addFlag=1;

});

5.提交表单

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){
		if(data == 1){
			$("#dd").dialog("close");
			$('#dg').datagrid('reload');
		}
		}
	});

}

结果：

 

 二、删除

1、datagrid中添加一列“删除”

{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){

return '<a href="javascript:void(0);" οnclick="edit();">修改</a>  <a href="javascript:void(0);" οnclick="del();">删除</a>'

}

2、写删除的Dao方法及子控制器内的方法

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

public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		String s1 = req.getParameter("bids");
   //这个是批量删除		
        if(s1!=null) {
			String[] split = s1.split(",");
			for (int i = 0; i < split.length; i++) {
				book.setBid(Integer.parseInt(split[i]));
				bookDao.del(book);
			}
		}
//这个是删除
		bookDao.del(book);
		ResponseUtil.writeJson(resp, 1);
		ResponseUtil.writeJson(resp, 0);
		return null;
	}

3、增加删除的点击事件

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("请选择需要删除的数据");
	}
}

结果：

 

三、批量删除 

1、从datagrid控件中选中添加复选框属性一列

 checkbox:true,

2、在界面给予一个批量删除的按钮

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

3、写批量删除的点击事件

 $("#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){
			 $.ajax({
		        	url:$("#ctx").val()+'/book.action?methodName=del&bids='+ids.join(","),
		        	success:function(data){
		        		if(data == 1){
		        			$('#dg').datagrid('reload');
		        		}
		        	}
		         });  
		 }
	 });

4、子控制器调用dao方法中单个删除的方法，然后调用子控制器的批量删除

public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		String s1 = req.getParameter("bids");
   //这个是批量删除		
        if(s1!=null) {
			String[] split = s1.split(",");
			for (int i = 0; i < split.length; i++) {
				book.setBid(Integer.parseInt(split[i]));
				bookDao.del(book);
			}
		}
//这个是删除
		bookDao.del(book);
		ResponseUtil.writeJson(resp, 1);
		ResponseUtil.writeJson(resp, 0);
		return null;
	}

结果：