easyui_datagrid数据表格的增删改案例

最新推荐文章于 2022-06-21 16:59:57 发布

西米露U

最新推荐文章于 2022-06-21 16:59:57 发布

阅读量413

点赞数

分类专栏： easyui datagrid dialog 文章标签： java html web

本文链接：https://blog.csdn.net/m0_46699799/article/details/107001409

版权

datagrid数据表格的增删改案例

增加案例
- 代码
- 效果
修改案例
- 代码
- 效果
删除案例
- 代码
- 效果
遇到的各种bug解决

之前我们做增加或修改都是另外写一个界面，然后跳转到那个界面进行数据输入然后在去处理业务逻辑，但是这样的话，就比较麻烦，而且页面太多也比较混乱，所以今天的增加，修改案例我们利用dialog模态框组件配合form表单进行增加，修改

增加案例

代码

首先我们先把后台写好
Dao
UserDao
add方法
利用自定义MVC框架
在这里插入图片描述
然后是一个用来判断是否成功的工具类（泛型），这个工具类的构造方法都是私有的，不可以被随便实例化，定义一个公开的对象，把它数据定好，不可以随便实例化修改，这样就不会乱。
Result

package com.wangjuanxia.util;

public class Result<T> {
	private int code;
	private String msg;
	private T data;
	
	public static Result success=new Result<>(200,"成功");
	public static <T> Result ok(T data) {
		return new Result(data);
	}
	
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public T getData() {
		return data;
	}
	public void setData(T data) {
		this.data = data;
	}
	private Result(int code, String msg, T data) {
		super();
		this.code = code;
		this.msg = msg;
		this.data = data;
	}
	private Result() {
		super();
	}
	@Override
	public String toString() {
		return "Result [code=" + code + ", msg=" + msg + ", data=" + data + "]";
	}
	private Result(int code, String msg) {
		super();
		this.code = code;
		this.msg = msg;
	}

	private Result(T data) {
		super();
		this.data = data;
	}
	
	
}

配置web层
UserAction
add方法
处理业务逻辑
在这里插入图片描述
js文件
给新增按钮绑定点击事件，点击就打开一个dialog窗体，内容是一个表单，点击dialog窗体中的保存按钮的话，就将这个表单提交，跳转页面，处理业务逻辑，如果成功的话就弹出成功的弹出框，清除表单的值以及关闭dialog模态框，并且刷新datagrid数据表格。

	//给新增按钮绑定点击事件
	$("#btn-add").click(function(){
		//需要打开dialog窗体
		$("#dd").dialog('open');
	});
	
	$("#btn-save").click(function(){
		var id=$('#id').val();
		$('#ff').form('submit', {    
			url: ctx+'/user.action?methodName=save&id='+id,    
		    success:function(data){    
		    	data=eval('('+data+')');
		    	if(data.code==200){
		    		 alert(data.msg)
		    		 //刷新
		    		 $('#ff').form('clear');
		    		 $('#dd').dialog('close');
		    		 $('#dg').datagrid('reload');
		    		 
		    	}
		    }    
		});
		
	});

jsp页面

<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }"/>
	<div id="tb">
		<input class="easyui-textbox" id="name" name="name" />
		<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
		<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
	</div>

	<table id="dg"></table> 
	//模态框，默认关闭的状态
	<div id="dd" class="easyui-dialog" title=

最低0.47元/天解锁文章

西米露U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui_datagrid数据表格的增删改案例

datagrid数据表格的增删改案例增加案例代码效果修改案例代码效果删除案例代码效果遇到的各种bug解决之前我们做增加或修改都是另外写一个界面，然后跳转到那个界面进行数据输入然后在去处理业务逻辑，但是这样的话，就比较麻烦，而且页面太多也比较混乱，所以今天的增加，修改案例我们利用dialog模态框组件配合form表单进行增加，修改增加案例代码首先我们先把后台写好DaoUserDaoadd方法利用自定义MVC框架然后是一个用来判断是否成功的工具类（泛型），这个工具类的构造方法都是私有的，不可
复制链接

扫一扫