datagrid 之新增删除

一、思维导图

二、新增

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

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

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

修改与新增共用一个方法，定义一个addFlag,在增加按钮点击事件里定义addFlag为1，在修改按钮点击事件里定义addFlag为2

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

3、提交表单、窗体关闭

$('#ff').form('submit',{
		url:href,
		success:function(data){
			if(data == 1){
				$("#dd").dialog("close");
				$('#dg').datagrid('reload')
			}
		}
	});

4、刷新数据表格

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

5、后台方法

BookDao（由于书籍表里的id不是自增长，所以运用毫秒数随机生成id）

//增加
	public void add(Book book) throws Exception {
		String sql="insert into t_mvc_book values(?,?,?)";
		//随机生成id
		book.setBid((int)new Date().getTime()); 
		super.executeUpdate(sql, 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中添加删除列

<a href="javascript:void(0);" οnclick="del()">删除 </a>

2、删除的点击事件

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

3、后台方法

BookDao

//删除
	public void del(Book book) throws Exception {
		String sql="delete from t_mvc_book where bid=?";
		super.executeUpdate(sql, 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) {
				e1.printStackTrace();
			}
			}
		return null;
	}

四、批量删除

1、加入checkbox复选框

$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',
//	   分页 
	    pagination:true,
//	    填充列
	    fitColumns:true,
	    chexkbox: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>'
			}
}    
	    ]]    
	});  

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、后台方法

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

5、运行效果

 

 

-------------------------没有了---------------------------