搭建ERP（新增）

最新推荐文章于 2025-07-01 15:44:50 发布

xhudqlg

最新推荐文章于 2025-07-01 15:44:50 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xhudqlg/article/details/84328161

本文详细介绍了如何利用EasyUI的弹出对话框功能结合AJAX进行数据的新增操作，包括利用JSON返回数据保存状态、通过EasyUI的JS代码实现弹出对话框新增数据、在datagrid上添加工具栏按钮触发对话框、点击对话框保存按钮提交数据到数据库并刷新数据等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、利用json返回数据保存是否成功

        public void add() {
		//{"success":true,"message":""}
		//返回前端的JSON数据
		Map<String,Object> rtn = new HashMap<>();
	    try {
	    	depBiz.add(dep);
	    	rtn.put("success", true);
	    	rtn.put("message", "新增成功");
		} catch (Exception e) {
			e.printStackTrace();
			rtn.put("success", false);
	    	rtn.put("message", "新增失败");
		}
	    write(JSON.toJSONString(rtn));
	}

2、采用弹出对话框的方式新增数据（通过easyUI的js代码实现）。

        //新增窗口
		$('#editDlg').dialog({
			title : '部门编辑',
			width : 300,
			height : 200,
			closed : false, //初始化时窗口是否为关闭状态   
			cache : false,
			href : 'get_content.php',
			modal : true
		});

3、在datagrid上添加代码，在浏览器页面定义工具栏。添加按钮，点击它弹出对话框

            //添加工具栏(新增按钮)
			toolbar: [{
				text:'新增',
				iconCls: 'icon-add',
				//新增按钮的方法
				handler: function(){
					$('#editDlg').dialog('open');
				}
			}]

4、点击对话框中的保存按钮，提交数据到数据库并刷新大窗口数据

        //绑定弹出窗口中保存按钮的点击事件
		$('#btnSave').bind('click',function(){
			var formData = $('#editForm').serializeJSON();
			$.ajax({
				url: 'dep_' + method,//提交数据到该地址
				data: formData,
				dataType: 'json',
				type: 'post',
				success:function(rtn){
					$.messager.alert("提示",rtn.message,'info',function(){
						//成功的话，我们要关闭窗口
						$('#editDlg').dialog('close');
						//刷新表格数据
						$('#grid').datagrid('reload');
					});
				}
			});
		});

5、注意：在javascript中没有代码自动提示，一定要注意代码书写正确，特别是大小写！！！一开始我把dataType写成了datatype，导致点击保存按钮后只关闭窗口，部刷新大窗口的数据，并提示undefined。