EasyUI使用DataGrid数据表格实现增删改查

前言

接前文，已经用EasyUI的DataGrid组件实现了查询数据渲染的功能，这篇博文给大家分享下增删改的实现

增加、修改功能的实现步骤

先介绍一下增加功能的实现：
利用dialog组件进行同一页面增加，这个组件和模态框一个道理，只不过EasyUI的样式不太美观，引用：

要进行动态的页面传递数据到后台，那么给前文的增加按钮绑定事件:

// 给新增按钮绑定点击事件
	$("#btn-add").click(function() {
		$("#dd").dialog('open');
	})

也就是说，当我点击增加时，dialog对话框才会显示出来填写要新增的数据，否则不显示.
然后将dialog组件内嵌一个表单进行数据添加：

<div id="dd" class="easyui-dialog" title="书籍信息编辑窗体"
		style="width: 400px; height: 400px;"
		data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">
		<form id="ff" method="post">
		<input type="hidden" name="id"  />
			<div>
				<label for="name">书籍名称:</label> <input class="easyui-validatebox"
					type="text" name="name" data-options="required:true" />
			</div>
			<div>
				<label for="cid">书籍类别:</label> <input class="easyui-validatebox"
					type="text" name="cid" data-options="required:true" />
			</div>
			<div>
				<label for="author">作者:</label> <input class="easyui-validatebox"
					type="text" name="author" data-options="required:true" />
			</div>
			<div>
				<label for="price">价格:</label> <input class="easyui-validatebox"
					type="text" name="price" data-options="required:true" />
			</div>
			<div>
				<label for="image">图片地址:</label> <input class="easyui-validatebox"
					type="text" name="image" data-options="required:true" />
			</div>
			<div>
				<label for="publishing">出版社:</label> <input
					class="easyui-validatebox" type="text" name="publishing"
					data-options="required:true" />
			</div>
			<div>
				<label for="description">描述:</label> <input
					class="easyui-validatebox" type="text" name="description"
					data-options="required:true" />
			</div>
			<div>
				<label for="state">物流状态:</label> <input class="easyui-validatebox"
					type="text" name="state" data-options="required:true" />
			</div>
			<div>
				<label for="deployTime">发货时间:</label> <input
					class="easyui-validatebox" type="text" name="deployTime"
					data-options="required:true" />
			</div>
			<div>
				<label for="sales">数量:</label> <input class="easyui-validatebox"
					type="text" name="sales" data-options="required:true" />
			</div>
		</form>
		
	</div>

前台效果：

值得一提的是，EasyUI已经做好了对文本的正则校验，只需引用就行：

data-options="required:true"//非空校验

那么在我填写好我要增加的数据后（后台已写好增删改方法，结合自定义mvc），进行保存提交后台完成增加：

	//提交后台增加
	$("#btn-save").click(function() {
		$("#ff").form('submit', {
			url : ctx + '/book.action?opt=save',
			onSubmit : function() {
				console.log("onSubmit...");
			},
			success : function(data) {
			//对data返回值进行eval转换，否则获取不到内含参数值
				data = eval('(' + data + ')');
				// debugger;
				if (data.code == 200) {
					alert(data.msg);
					// 清空dialog数据
					$("#ff").form('clear');
					//增加完后关闭dialog对话框
					$("#dd").dialog('close');
					//对数据表格刷新
					$("#dg").datagrid('reload');
				}
			}
		});
	})

这里踩了个坑：
由于写了个通用方法进行操作结果码返回，然后通过后台json的转译，自以为能在前台直接点出参数值：

public static Result<Object> SUCCESS = new Result<>(200,"操作成功");

然后就是前台弹出data值时，一直undified，所以一定要加上：

//对data返回值进行eval转换，否则获取不到内含参数值
				data = eval('(' + data + ')');

然后就是修改功能：数据格式化，显示操作列

								{
									field : '操作',
									title : '操作',
									width : 300,
									formatter : function(value, row, index) {
										return '修改 删除'
									}
								}, ] ]
					});

绑定事件：

function edit() {
	// alert('测试一下');
	// 数据回显，将选中的datatgrid值进行回显到form表单
	var row = $("#dg").datagrid('getSelected');
	if (row) {
		$("#ff").form('load', row);
		$("#dd").dialog('open');
	}

}

在这里需要注意的就是，点击提交时，到底是怎么去判断是修改还是增加，一种就是js中判断然后跳转不同的后台方法，那么我这里后台实现判断：

/**
	 * 修改增加二合一
	 * @param req
	 * @param resp
	 * @return
	 */
	public String save(HttpServletRequest req,HttpServletResponse resp) {
		try {
			if(book.getId()!=0) {
				this.bookDao.edit(book);
			}else {
				this.bookDao.add(book);
			}
			ResponseUtil.writeJson(resp, Result.SUCCESS);
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		} catch (SecurityException e) {
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

也就是说，增加时，id肯定是为空的，所以很好判断是增加还是修改操作.
修改时数据回显：

删除功能实现

删除的实现，因为已经对列进行了格式化操作，只需在js中写好方法调用就行了：

function del() {
	var row = $("#dg").datagrid('getSelected');//得到选中行的数据
	if (row) {
		var ctx = $("#ctx").val();
		$.ajax({
			url : ctx + '/book.action?opt=del&&id=' + row.id,
			success : function(data) {
				data = eval('(' + data + ')');
				// debugger;
				if (data.code == 200) {
					alert(data.msg);
					// 刷新数据
					$("#dg").datagrid('reload');
				}
			}
		})

	}
}

好了，使用EasyUI的DataGrid数据表格控件完成增删改查就实现了…