datagrid 之新增、删除

思维导图

 

一、新增

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

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

2、变量判断是增加还是修改（写在jQuery外面）

//做变量判断
var addFlag=0;

3、点击事件弹出窗口（添加事件写在jQuery里面）

$("#btn-add").click(function() {
		//API中form表单clear方法（清空表单数据）
		$('#ff').form('clear');
		//打开窗口
		$("#dd").dialog("open")
		//新增改为1；
		addFlag=1;
	});

修改方法中增加：

 addFlag=2;

4、点击确认按钮提交表单到后台，新增/修改共用一个方法

//提交要写submitForm()的方法（在userManage.jsp的表单按钮上）
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'
	}
	
	//填写form表单的提交方法（form表单方法中）
	$('#ff').form('submit', {
		url: href,
		success: function(data){
			/**
			 * 有两个缺陷
			 * 1、窗口没有关闭
			 * 2、数据没有刷新
			 */
			if(data==1){
				//1：是确认，然后关闭窗口
				$("#dd").dialog("close");
				//再刷新数据（datagrid的方法里面reload）
				var row=$('#dg').datagrid('reload');
			}
		}
	});	
}

5、写到方法和web

①、BookDao

//增加
		public void add(Book book) throws Exception {
			String sql="insert into t_mvc_book values(?,?,?)";
			//随机补了一个为int类型的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 {
			bd.add(book);
			System.out.println("-----");
			//1：是确认；0：是取消
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

6、结果界面

增加了名称为：23的

二、删除

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

 //datagrid中的列属性
            {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
                //οnclick="edit(); 添加修改事件
                return '<a href="javascript:void(0);" οnclick="edit();">修改</a>&nbsp;&nbsp;<a href="javascript:void(0);" οnclick="del();">删除</a>';
                 }

2、使用Messager（消息窗口）

①、删除方法事件写在jQuery外面

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

//删除事件
function del() {
	//删除需要拿到bid
	//1、datagrid控件（方法中的getSelected）获取对应的数据row(行)
	var row=$('#dg').datagrid('getSelected');
	//判断是否选中行row
	if(row){
		var bid=row.bid;
		//API中Window(窗口)中的Messager（消息窗口）
		//Messager组件并不能直接向后台发送请求，可以使用ajax发送请求
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		    	$.ajax({
		    		//同时还要把bid带过去
		    		url:$("#ctx").val()+'/book.action?methodName=del&bid='+bid,
		    		success:function(data){
		    			//data成功返回1，失败返回0；
		    			if(data==1){
		    				//刷新数据表格
		    				var row=$('#dg').datagrid('reload');
		    			}
		    		}
		    	});
		    }    
		}); 
	}else{
		alert("请选择需要删除的行数据");
	}
}

3、写到方法和web

①、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 {
			bd.del(book);
			//1：是确认；0：是取消
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

4、结果界面

①、没有选择行

 ②、再次选择是否删除

 ③、成功后

结束了！！！