创建easyui-dialog实现增加/修改bean信息

最新推荐文章于 2019-09-26 16:06:33 发布
原创 最新推荐文章于 2019-09-26 16:06:33 发布 · 359 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#struts #jsp #ajax

本文介绍了如何利用EasyUI的dialog组件在jsp页面中实现bean信息的增加和修改。涉及到的内容包括jsp编辑、js脚本编写、Struts2控制器处理以及struts2配置文件的调整。在添加操作中，特别提到了需要清理dialog的缓存，处理表单验证，并通过form的submit方法实现ajax提交。

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

[size=large]是否采用dialog增加/修改bean信息根据项目需求而定，一般而言，若需添加/修改的信息较多或者其他因素则应跳转至相应页面进行操作，若添加/修改的信息较少，可采用这种方式。[/size]

[size=large]一、添加[/size]
[size=medium]1.编辑jsp
看起来比较乱，也不好排版,请见谅..[/size]

<!-- 1.页面引入样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/icon.css">
<!-- 2.页面引入脚本 -->
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/datagrid-detailview.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> 
<!-- 3.页面引入自定义脚本 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/userManager.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/validate.js" ></script>
<!-- 4.页面引入其他脚本 -->
<link href="${pageContext.request.contextPath }/myDatePicker_2.2/datePicker.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/myDatePicker_2.2/jquery.datePicker-min.js"></script>
...
<form name="form1" id="form1">
               <a href="#" onclick="obj.add()" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加用户</a>
               <a href="#" onclick="obj.edit()" id="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改用户</a> 
               <a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
               <a href="#" id="redo" onclick="obj.redo()" class="easyui-linkbutton" iconCls="icon-redo" plain="true">取消编辑</a>
           </form>
...

<!-- 添加/修改用户 -->
      <div id="mydialog" style="display: none;padding: 5px;width: 361px;height: 326px" >
	    <form id="addOrEditForm" name="addOrEditForm" method="post">
	        <table border="0" cellpadding="0" cellspacing="0" >
		        <tr id="idTr" style="display:none;"><td nowrap align="right" style="height: 35px">用户id：</td><td><input  type="text"id="_eid" name="id" class="easyui-validatebox" value="${user.uid}"></td></tr>
		        <tr><td nowrap align="right" style="height: 35px">姓名：</td><td><input id="_ename" name="empl.ename" type="text" class="easyui-validatebox" data-options="required:true"   validType="_ename[]"/></td></tr>
		        <tr><td nowrap align="right" style="height: 35px">性别：</td><td><input id="_Man" name="empl.sex" type="radio" value="男" checked="checked">男<input id="_Women" name="empl.sex" type="radio" value="女" >女</td></tr>
		        <tr><td nowrap align="right" style="height: 35px">出生日期：</td><td><input id="_birthday" name="empl.birthday" type="text" class="easyui-validatebox" data-options="required:true" plugin="datepicker" validType="_date[]" /></td></tr>
		        <tr><td nowrap align="right" style="height: 35px">入职日期：</td><td><input id="_hiredate" name="empl.hiredate" type="text" class="easyui-validatebox" data-options="required:true" plugin="datepicker" validType="_date['_hiredate',$('#_birthday').val()]" /></td></tr>  
		        <tr><td nowrap align="right" style="height: 35px">职责：</td><td><input id="_reception" name="empl.admin" type="radio" value="0" checked="checked">前台<input id="_backstage" name="empl.admin" type="radio" value="1" >后台</td></tr>
		        <tr><td nowrap align="right" style="height: 35px" >职位：</td><td><select id="_job" name="empl.job" class="easyui-combobox" panelHeight="auto" validType="_job[]">
																			        <option selected value="-1">请选择该用户所属职位</option>
																			        <c:forEach items="${job }" var="v">
																			            <option value="${v.jid}">${v.jname }</option>
																			        </c:forEach>
																			     </select></td></tr>
				<tr><td nowrap align="right" style="height: 35px" >所属部门：</td><td><select id="_dept" name="empl.deptno" class="easyui-combobox" panelHeight="auto" validType="_dept[]"  >
																				        <option selected value="-1">请选择该用户所属部门</option>
																				        <c:forEach items="${dept }" var="v">
																				            <option value="${v.did }">${v.dname }</option>
																				        </c:forEach>
																				    </select></td></tr>	
	       </table>
	    </form>
	</div>


[size=large]2.编辑js[/size]
[size=medium]说明：
1.因为每次打开dialog打开的是上次dialog的缓存，所以在添加操作时要先清空表单中的值以及设定默认选项；
2.因为表单验证的关系--像这句“$("#_job").combobox('setValue','-1')”就会触发验证，此外提交表单也会触发表单验证，所以为了在打开dialog前清除验证效果，故而增加一个onBeforeOpen事件，在其中删除相关的验证css样式，这样，打开的dialoh显示的就是一个干净的界面。
3. $('#addOrEditForm').form("submit",{..})这个语句块是easyui的“form”中自带的方法，它会将表单提交的方式自动转为ajax提交。当然，也可以采用传统的ajax提交，那样会麻烦一些。[/size]

obj = {	
			//在mydialog添加员工信息。
			add:function(){
				//权限验证
				if(currUserStatus!=0){$.messager.alert('警告', '您不是管理员，无权执行此操作！', 'warning');return}
				//清空#addOrEditForm中的输入框的值
				$('#_eid').val('');
				$("#_ename").val('');
				$("#_Man").attr("checked","true");//性别默认选中男性
            	$("#_birthday").val('');
            	$("#_hiredate").val('');
            	$("#_reception").attr("checked","true");//职责默认选中前台
            	//设置下拉框的默认选项
            	$("#_job").combobox('setValue','-1')
            	$("#_dept").combobox('select','-1');
            	//隐藏用户编号行
            	$('#idTr').hide();
            	//显示并设置mydialog
				$('#mydialog').show().dialog({
					collapsible:true,
					iconCls:'icon-add',
					title:' 添加用户',
					height:336,
					width:390,
					cache:false,
					/**
					 * 取消校验标识。这并不影响最后提交表单的校验。
					 */
		            onBeforeOpen:function(){ 
		            	$("#_ename").removeClass('validatebox-invalid');
		            	$("#_Man").removeClass('validatebox-invalid');
		            	$("#_birthday").removeClass('validatebox-invalid');
		            	$("#_hiredate").removeClass('validatebox-invalid');
		            	$("#_reception").removeClass('validatebox-invalid');
		            	$("#_job").next().removeClass('textbox-invalid');
		            	$("#_dept").next().removeClass('textbox-invalid');
		            	$("#_job").next().children(":text").removeClass('validatebox-invalid');
		            	$("#_dept").next().children(":text").removeClass('validatebox-invalid');
		            },
					buttons:[//底部按钮
					         {
					        	 text:'提交',
					        	 type:'submit',
								 iconCls:'icon-ok',
								 handler: function(data){
									 /**
									  * 将表单转为ajax提交
									  */
									 $('#addOrEditForm').form("submit",{
									     url:'emplAction!add.action',
									     onSubmit:function(){
									         return $(this).form('validate');
									     },
									     success:function(data){
									    	 $.messager.show({
													title : '提示',
													msg : data ,
												});
											   $('#mydialog').dialog('close'); 
											   $('#dg').datagrid('load');
											   $('#dg').datagrid('loaded');
									     }
								     }); 

								 }
					         },
					         {
					        	 text:'取消',
					        	 iconCls:'icon-cancel',
					        	 handler:function(){
					        		 $('#mydialog').dialog('close');
					        	 }
					         }
					],
					onClose: function () {
		                //解决弹出窗口关闭后，验证消息还显示在最上面
		                $('.validatebox-tip').remove();
		            }	
			   }).dialog('open');
			   //取消当前表格的所有选中行
			   $('#dg').datagrid('unselectAll');
			},
			//在mydialog修改员工信息。
			edit:function(){
                if(currUserStatus!=0){$.messager.alert('警告', '您不是管理员，无权执行此操作！', 'warning');return}
                //获取选择行
                var rows = $('#dg').datagrid('getSelections');
                $('#idTr').show()
                if(rows.length == 1){
                	//设置#addOrEditForm中的输入框的值
                	//设置eid并设置其不可编辑
                	$("#_eid").val(rows[0].eid);
                	$('#_eid').attr('readonly','readonly');
                	$("#_eid").css("background-color",'#D8DFDD')
                	$("#_ename").val(rows[0].ename);
                	rows[0].sex=='男'?$("#_Man").attr("checked","true"):$("#_Women").attr("checked","true");
                	$("#_birthday").val(rows[0].birthday);
                	$("#_hiredate").val(rows[0].hiredate);
                	rows[0].admin=='0'?$("#_reception").attr("checked","true"):$("#_backstage").attr("checked","true");
                	//设置下拉框的默认选项
                	$("#_job").combobox('select',rows[0].jid)
                	$("#_dept").combobox('select',rows[0].did)
                	//显示mydialog
                	$('#mydialog').show();
    				$('#mydialog').dialog({
    					collapsible:true,
    					iconCls:'icon-edit',
    					title:' 修改用户',
    					height:370,
    					width:390,
    					onBeforeOpen:function(){ 
    						$("#_ename").removeClass('validatebox-invalid');
    		            	$("#_Man").removeClass('validatebox-invalid');
    		            	$("#_birthday").removeClass('validatebox-invalid');
    		            	$("#_hiredate").removeClass('validatebox-invalid');
    		            	$("#_reception").removeClass('validatebox-invalid');
    		            	$("#_job").next().removeClass('textbox-invalid');
    		            	$("#_dept").next().removeClass('textbox-invalid');
    		            	$("#_job").next().children(":text").removeClass('validatebox-invalid');
    		            	$("#_dept").next().children(":text").removeClass('validatebox-invalid');
    		            },
    					buttons:[
    					         {
    					        	 text:'提交',
    								 iconCls:'icon-ok',
    								 handler: function(data){
    									 /**
    									  * 将表单转为ajax提交
    									  */
    									 $('#addOrEditForm').form("submit",{
    									     url:'emplAction!edite.action',
    									     onSubmit:function(){
    									         return $(this).form('validate');
    									     },
    									     success:function(data){
    									    	 $.messager.show({
    													title : '提示',
    													msg : data ,
    												});
	   $('#mydialog').dialog('close'); 
    											   $('#dg').datagrid('load');
    											   $('#dg').datagrid('loaded');
    									     }
    								     });

    								 }
    					         },
    					         {
    					        	 text:'取消',
    					        	 iconCls:'icon-cancel',
    					        	 handler:function(){
    					        		 $('#mydialog').dialog('close');
    					        	 }
    					         }
    					]
    			   });
    			   //取消当前表格的所有选中行	
    			   $('#dg').datagrid('unselectAll');
                }else{
                	$.messager.alert('警告', '修改必须选中仅且一行！', 'warning');
                }
			}
	}


[size=large]3.编辑控制器[/size]
[size=medium]说明：1.这里的控制器采用的是struts2；2.这里需注意的是，前台采用的是ajax的提交方式，要让struts2以这种方式封装对象，需导入一个jar包：struts2-json-plugin-2.3.20.jar，在struts的配置文件中也需简单的设置一下，具体参见“4.编辑struts2配置文件”[/size]

//添加用户
	public void add() throws IOException{
		empl.setPassword("123");
		empl.setStatus(1);//新添员工状态为“试用期”
		boolean b = empService.addEmpl(empl);
		PrintWriter out = resp.getWriter();
		if(b){
			out.print("success");
		}else{
			out.print("fail");
		}
	}
//修改用户
	public void edite() throws IOException{
		boolean b = empService.editEmpl(empl, id);
		PrintWriter out = resp.getWriter();
		if(b){
			out.print("success");
		}else{
			out.print("fail");
		}
	}


[size=large]4.编辑struts2配置文件[/size]
[size=medium]非常简单，设置extends="json-default"即可。[/size]

<package name="mypackage" extends="json-default" >

	    <action name="emplAction" class="com.chen.action.EmplAction">
	      <result name="tolist" type="redirectAction">emplAction!listEmpl.action</result>
	      <result name="false">/login.jsp</result>
	      <result name="list">/WEB-INF/jsp/userManager.jsp</result>
	      <!-- 显示员工详情的地址 -->
	      <result name="userDetail">/WEB-INF/jsp/userDetail.jsp</result>
	      <result name="toAddEmpl">/WEB-INF/jsp/addEmpl.jsp</result>
	      <result name="toEditEmpl" type="dispatcher">/WEB-INF/jsp/editEmpl.jsp</result>
	    </action>

  </package>



[size=medium]大功告成，效果如下：[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1011/95ea1067-8687-366b-bb1b-ab352b98238e.png[/img]
easyui动态组件添加和删除
phillaccy的博客
02-14 1180
1、定义目标位置   &lt;div id="btnDiv"&gt;&lt;/div&gt;2、添加动态组件function addItems(){ var conditionDiv = '&lt;div class="itemsDiv"&gt;' +' &lt;span style="width:40px"&gt;监控项：&lt;/span&gt;'
Django编辑个人信息
实践求真知
12-23 4700
一 编写视图mysite/account/views.py from django.shortcuts import render # HttpResponseRedirect实现URL的转向 from django.http import HttpResponse,HttpResponseRedirect # Django默认的用户认证和管理中的两个方法 from django.contri...
通过Jquery-easyui框架对后台系统中的数据的修改
zxm199666abg的博客
12-29 894
通过Jquery-easyui框架对后台系统中的数据的修改     1.找出前端页面           XX.xml     2.修改按钮【修改按钮绑定一个点击事件】           $("#id的属性值).click(function(){           )     3.判断点击的数据是行数？？？？              【获取行数】          var r
EasyUI 添加数据
lovoo的博客
10-22 1052
1、创建toolbar:toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ openAddUserDialog(); } }]2、添加dialog,里面有添加用户的表单<div id="addDialog" data-options="closed:true,modal:true,
SSh结合Easyui实现Datagrid的分页显示（多个实例）
01-12
【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景，涉及到Spring、Struts2和Hibernate（SSh）三大框架与EasyUI前端组件的整合。在这个实例中，我们将探讨如何利用这些技术来实现一个具备分页...
SSM+EasyUI+多模块化开发
Secutiry_的博客
04-08 609
一.创建Maven项目 1.1 项目结构设置 搭建整个项目结构 1.1 pom.xml配置 在pom.xml中引入下面代码 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XM...
SSM整合Springboot（二）利用easyUI
码放南山
09-26 782
目录 案例效果如下： 分页模块： 添加模块： 修改模块： 删除模块： 一、新建war项目 二、补全项目结构文件夹（如下图） 三、添加maven相关依赖 三、库表设计 四、创建实体类、Dao层接口、mybatis的映射文件 五、mybatis配置文件（空壳） 六、springboot的yml文件 七、springboot的主启动类 其他补充： 一、前端展示： 二、sp...
基于SSH与easyui实现的CRUD Web项目教程
- 掌握EasyUI组件的使用，如Grid表格、Form表单、Dialog对话框、Tree树形控件等，以实现丰富的用户界面。 - 学习如何通过Ajax与后端进行数据的异步交互。 - 学习如何通过EasyUI的自定义验证功能实现前端的数据...
SSM+EasyUI集成
布谷鸟
04-07 1183
（一）SSM集成 1. 创建maven项目 2. 导包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:sch...
easy-ui
05-28 444
原来的网址： 先看一下运行后的页面 1、列表展示 2、新增页面 3、修改页面 把jquery easyui下载好之后，一般引用下页几个文件 复制代码 代码如下:             type="text/css" /> //页面图标样式         //jquery easyui主要的js     首先是列表展
easyui datagrid 弹窗添加修改删除
05-27 3737
本章博客我将带你实现，在前一篇的基础上，新增实现弹框式添加数据到数据库的功能。（接下来的博客将会推出，修改，删除数据功能） 效果图，4-1： 所谓弹窗式，就像图4-1的那样，弹出一个窗口，用户输入信息然后新增到数据库， 前台HTML如下： [html] view plain copy %@ Page Lang
模态框-model dialog
远在远方的风比远方更远
03-14 1614
模态框： 需要处理的弹框，用户需要处理完这个模态框才能继续主界面的操作。 Bootstrap模态框 示例来自http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html &lt;h2&gt;创建模态框（Modal）&lt;/h2&gt; &lt;!-- 按钮触发模态框 --&gt; &lt;button class="btn btn-pri...
easyui datagrid 前后台交互
热门推荐
birdofsky的专栏
11-12 1万+
最近自学easyui，先选择了datagrid，悲催的是刚学就遇到问题，后台数据怎么都整不到页面上。。好不容易页面有数据了，但是发现没有渲染表格。好吧，言归正传，直接贴代码。 先贴最重要的action：public class UserManageAction extends BaseAction { private static final long serialVersionUID =
easyui 数据表格行内编辑（编辑、保存、删除）
qssn的博客
04-04 2996
easyui 数据表格行内编辑（编辑、保存、删除）
实现信息集中访问的可拖拽easyui-portal布局组件
easyui-portal的实现依赖于JavaScript和jQuery，通过easyui框架提供的API来实现面板的创建、拖拽、存储和恢复等操作。在技术实现上，可能涉及到DOM操作、事件绑定、动画效果（如淡入淡出）、数据存储（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值