DataGrid之增加与删除

目标：DataGrid之修改  在上节课的基础上添加增加与删除操作

一，增加

思路：

1，查询旁边添加新增按钮

2，添加点击事件弹出窗体

3，提交表单

4，窗体关闭

5，刷新数据表格

1，查询旁边添加新增按钮

在jsp界面添加一个增加按钮 id为btn-add   

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

var addFlag = 0;  

注意：在提交时，判断用的是用新增方法还是编辑方法，则需在点击事件外建立addFlag属性，以及定义一个href为null，点击修改时， addflag变为2，点击增加时，addflag变为1，之后进行判断，如果addFlag为1，则调用新增方法，如addFlag为2，则调用修改方法

3，提交表单 与  4，窗体关闭  及  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');
			}
		}
	});
}

样式展示：

后台编码（dao  web）

BookDao（由于前端表格没有写增加id的列，无法传递id，所有后台需要一个方法来取最大id）

方法一：

book.setBid((int)new Date().getTime());  new一个时间戳

方法二：

写一个获取最大id的方法 

	public void add(Book book) throws Exception {
		BookDao bookDao = new BookDao();
		book.setBid(bookDao.getMaxId()); 
//		book.setBid((int)new Date().getTime());  new一个时间戳
		super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
	}
	
//	获取最大id
	public int getMaxId() throws Exception {
		Connection con = DBAccess.getConnection();;
		PreparedStatement pst = con.prepareStatement("select max(bid)+1 from t_mvc_book");
		ResultSet rs=pst.executeQuery();
		if(rs.next()) {
			return rs.getInt(1);
		}
		return 0;
	}

BookAction

	public String add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			bookDao.add(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, 0);
		}
		return null;
	}

结果展示：

二，删除（涉及messager控件）

1，DataGrid中添加一列“删除”

2，删除的点击事件

3，向后台发送删除请求

4，刷新表格

1，DataGrid中添加一列“删除”

 2，删除的点击事件  与  3，向后台发送删除请求  (删除要用ajax方法来传递url进行删除)

/*删除事件*/
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  web）

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) throws Exception {
		try {
			bookDao.del(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, 0);
		}
		return null;
	}

效果展示：

三，批量删除

思路：

1，添加批量删除按钮

2，添加点击事件

3，提交，刷新

1，添加批量删除按钮（id为btn-add）

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

2，添加点击事件  与  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 ){
			alert(ids.join(","));
			$.ajax({
	    		url:$('#ctx').val()+'/book.action?methodName=del&bid='+ids.join(","),
	    		success:function(data){
	    			if(data == 1){
	    				$('#dg').datagrid('reload');
	    			}
	    		}
	    	});
		}
	})

方法 

getSelections

none

返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。

从前端获取选中的行，放入数组，后端截取，循环删除。

BookAction

	public String del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			String ids = req.getParameter("bid");
			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();
			ResponseUtil.writeJson(resp, 0);
		}
		return null;
	}

 效果展示：

OK！到这就结束了，希望能帮到你！！！