搭建ERP（修改）

最新推荐文章于 2024-09-05 10:42:25 发布

xhudqlg

最新推荐文章于 2024-09-05 10:42:25 发布

阅读量946

点赞数

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

版权

总体思路：注意前端实现采用的是easyUI，所有的方法都是根据其生成

1、通过格式化列生成“修改”按钮；2、点击修改按钮弹出对话框 3、在对话框中根据点击的对象id查询到对象并将其显示到对话框中，3、点击对话框中的保存按钮，将修改后的数据提交到后台 4、弹出提示信息（是否保存成功）并刷新当前页面。

a、在表单（grid）数据中生成修改列

            { field :'-',
				title:'操作',
				align:'center',
				formatter:function(value,row,index){
				var oper ='<a href="javascript:void(0)" onclick="edit('+row.uuid+')">修改</a>';
				oper += '  <a href="javascript:void(0)" onclick="del('+row.uuid+')">删除</a>';
				return oper;
			}

b、在JavaScript中添加edit方法（其中的加载数据根据form中的load方法而来），它会根据url地址，加载json数据并显示，由于本例中返回的json数据格式是：【name：‘**’；tele：‘**’】，而在编辑框表单中的为【dep.name：‘**’；dep.tele：‘**’】,所以在根据id查询对象的get方法中，应该将jison的数据格式键都加上dep.

    /*
	*修改部门
	*/
	function edit(uuid){
		//弹出编辑框
		$('#editDlg').dialog('open');
		//清空表单内容
		$('#editForm').form('clear');
		method = 'update';
		//加载数据
		$('#editForm').form('load','dep_get?id='+uuid);
	}

/**
	 *获取 编辑对象
	 */
	public void get() {
		Dep dep = depBiz.get(id);
		String jsonString = JSON.toJSONString(dep);
		String jsonStringAfter = mapData(jsonString, "dep");
		write(jsonStringAfter);
	}
	/**
	 * 将查询到的JSON数据加上前缀，方便editform显示
	 * @param jsonString 需要加前缀的json字符串
	 * @param prefix  前缀
	 * @return  json数据
	 */
	public String mapData(String jsonString,String prefix) {
		//加前缀之前的json
		Map<String, Object> map =JSON.parseObject(jsonString);
		//加前缀
		Map<String, Object> dataMap = new HashMap<>();
		for (String key : map.keySet()) {
			dataMap.put(prefix+"."+key, map.get(key));
		}
		//加完前缀后返回JSON数据
		return JSON.toJSONString(dataMap);
		
	}

c、点击对话框中的保存按钮，将数据通过ajax提交到后台，并返回保存信息、刷新当前页面，这个采用的easyUI中的相关方法实现

    //绑定弹出窗口中保存按钮的点击事件
		$('#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');
					});
				}
			});
		});

整个前端页面代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门管理</title>
<link rel="stylesheet" type="text/css"
	href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>

<!-- 将dep_list方法查询到的数据通过JSON返回到页面（采用了easyUI回显表格数据的方法） -->
<script type="text/javascript">
var method = "";
	$(function() {
		//grid是要显示数据的id
		$('#grid').datagrid({
			//dep_list是获取JSON数据的url（本文中是action页面中的一个方法）
			url : 'dep_getList',
			columns : [ [ {
				field : 'uuid',
				title : '部门编码',
				width : 100
			}, {
				field : 'name',
				title : '部门名称',
				width : 100
			}, {
				field : 'tele',
				title : '联系电话',
				width : 100,
				align : 'right'
			},{ field :'-',
				title:'操作',
				align:'center',
				formatter:function(value,row,index){
				var oper ='<a href="javascript:void(0)" onclick="edit('+row.uuid+')">修改</a>';
				oper += '  <a href="javascript:void(0)" onclick="del('+row.uuid+')">删除</a>';
				return oper;
			}
				
			} ] ],
			pagination : true,//分页
			singleSelect : true,//只能选中一行数据
			//添加工具栏(新增按钮)
			toolbar: [{
				text:'新增',
				iconCls: 'icon-add',
				//新增按钮的方法
				handler: function(){
					method = "add";
					$('#editDlg').dialog('open');//调用dialog的open方法，当点击按钮时，弹出对话窗口
				}
			}]

		});

		//绑定查询按钮的点击事件
		$('#btnSearch').bind('click', function() {
			//将查询表单数据转为JSON对象
			var formData = $('#searchForm').serializeJSON();
			//将数据传入通过ajax传入后端并回调数据，url默认使用前面#grid指定的url			
			$('#grid').datagrid('load', formData);

			/* 整个这段代码等同于$('#grid').datagrid('load',formData);
			//利用AJAX提交JSON对象数据
			$.ajax({
				url:'dep_getList',//将数据提交到该地址（action中的方法）
				data:formData,    //数据源
				dataType:'json',   //数据格式
				type:'post',      //数据提交方法
				//成功后返回查询到的json对象
				success:function(rtn) {
					//grid加载数据
					//可以理解为：grid对象的datagrid方法，该方法需要两个参数，第一个为loadData方法，第二个为rtn
					$('#grid').datagrid('loadData',rtn);
				}
			}); */

		});
		//新增窗口
		$('#editDlg').dialog({
			title : '部门编辑',
			width : 300,
			height : 200,
			mehtod :'add',//新增
			closed : true, //初始化时窗口是否为关闭状态   
			modal : true
		});
		//绑定弹出窗口中保存按钮的点击事件
		$('#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');
					});
				}
			});
		});
	});
	
	/*
	*删除部门
	*/
	function del(uuid) {
		$.messager.confirm("提示","确定要删除吗？",function(yes) {
			if(yes) {
				//点击确定按钮后，通过ajax将数据提交到后端进行删除
				$.ajax({
					url: 'dep_delete?id='+uuid,//提交数据到该地址
					dataType: 'json',
					type: 'post',
					success:function(rtn){
						$.messager.alert("提示",rtn.message,'info',function(){
							//刷新表格数据
							$('#grid').datagrid('reload');
						});
					}
				});
			}
		});
	}
	/*
	*修改部门
	*/
	function edit(uuid){
		//弹出编辑框
		$('#editDlg').dialog('open');
		//清空表单内容
		$('#editForm').form('clear');
		method = 'update'; //设置method方法为update
		//加载数据
		$('#editForm').form('load','dep_get?id='+uuid);
	}
</script>

</head>
<body>
	<div class="easyui-panel"
		style="padding-left: 4px; border-bottom: 0px;">
		<div style="height: 2px;"></div>
		<form id="searchForm">
			<table>
				<tr>
					<td>部门名称</td>
					<td><input name="dep1.name"></td>
				</tr>
				<tr>
					<td>部门电话</td>
					<td><input name="dep1.tele"></td>
				</tr>
			</table>
			<button id="btnSearch" type="button">查询</button>
		</form>
	</div>
	<table id="grid"></table>

	<div id="editDlg">
		<form id="editForm">
			<table>
				<tr>
					<td>部门名称</td>
					<td><input name="dep.name"><input type="hidden" name="dep.uuid"></td>
				</tr>
				<tr>
					<td>部门电话</td>
					<td><input name="dep.tele"></td>
				</tr>
			</table>
			<button id="btnSave" type="button">保存</button>
		</form>
	</div>
</body>
</html>

注意：在保存时不要忘记将id传入后台，本例隐藏了该input，