datagrid之新增与删除

最新推荐文章于 2024-04-17 09:51:17 发布

时刻干饭

最新推荐文章于 2024-04-17 09:51:17 发布

阅读量149

点赞数

文章标签： html

本文链接：https://blog.csdn.net/lszzz_/article/details/120725553

版权

这篇博客详细介绍了如何使用EasyUI在JavaWeb环境中实现数据的新增、删除和批量删除功能。通过在jsp页面添加按钮、事件监听以及与后台交互，实现了用户界面与数据库操作的联动。在DAO层和Web层分别添加了对应的CRUD方法，确保数据的正确存取。

摘要由CSDN通过智能技术生成

课程目标了解一下

一.新增

①在userManage.jsp界面新增一个增加按钮

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

②添加点击事件弹出窗体

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

界面展示

③提交表单

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

在dao包和web包添加方法

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

web包

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

④窗体关闭并且刷新数据表格

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

二.删除

①datagrid中添加一列“删除”

{field:'操作',title:'操作',width:100,align:'center',formatter: function(value,row,index){
                return '<a href="javascript:void(0);" οnclick="edit();">修改</a>&nbsp;&nbsp;<a href="javascript:void(0);" οnclick="del();">删除</a>';
            }
}

②删除的点击事件并且向后台发送请求

注意：删除是用messager控件，但是此控件不能向后台发送请求，所以我们要用Ajax发送请求

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

三.批量删除
①在userManage.jsp界面新增一个批量删除按钮

②在表格中添加复选框

checkbox:true,

{field:'ck',checkbox:true},

③给批量删除按钮添加点击事件

$("#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');
	    			}
	    		}
	    	});
		}
	});

④后台接收ids并调用删除方法

public String delAll(HttpServletRequest req, HttpServletResponse resp) {
		try {
			String str=req.getParameter("ids");
			String[] ids=str.split(",");
			for (String s : ids) {
				book.setBid(Integer.valueOf(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;
	}