wql025
- 浏览: 25649 次
-
最新评论
是否采用dialog增加/修改bean信息根据项目需求而定，一般而言，若需添加/修改的信息较多或者其他因素则应跳转至相应页面进行操作，若添加/修改的信息较少，可采用这种方式。
一、添加
1.编辑jsp
看起来比较乱，也不好排版,请见谅..
2.编辑js
说明：
1.因为每次打开dialog打开的是上次dialog的缓存，所以在添加操作时要先清空表单中的值以及设定默认选项；
2.因为表单验证的关系--像这句“$("#_job").combobox('setValue','-1')”就会触发验证，此外提交表单也会触发表单验证，所以为了在打开dialog前清除验证效果，故而增加一个onBeforeOpen事件，在其中删除相关的验证css样式，这样，打开的dialoh显示的就是一个干净的界面。
3. $('#addOrEditForm').form("submit",{..})这个语句块是easyui的“form”中自带的方法，它会将表单提交的方式自动转为ajax提交。当然，也可以采用传统的ajax提交，那样会麻烦一些。
3.编辑控制器
说明：1.这里的控制器采用的是struts2；2.这里需注意的是，前台采用的是ajax的提交方式，要让struts2以这种方式封装对象，需导入一个jar包：struts2-json-plugin-2.3.20.jar，在struts的配置文件中也需简单的设置一下，具体参见“4.编辑struts2配置文件”
4.编辑struts2配置文件
非常简单，设置extends="json-default"即可。
大功告成，效果如下：
一、添加
1.编辑jsp
看起来比较乱，也不好排版,请见谅..
<!-- 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>
2.编辑js
说明：
1.因为每次打开dialog打开的是上次dialog的缓存，所以在添加操作时要先清空表单中的值以及设定默认选项；
2.因为表单验证的关系--像这句“$("#_job").combobox('setValue','-1')”就会触发验证，此外提交表单也会触发表单验证，所以为了在打开dialog前清除验证效果，故而增加一个onBeforeOpen事件，在其中删除相关的验证css样式，这样，打开的dialoh显示的就是一个干净的界面。
3. $('#addOrEditForm').form("submit",{..})这个语句块是easyui的“form”中自带的方法，它会将表单提交的方式自动转为ajax提交。当然，也可以采用传统的ajax提交，那样会麻烦一些。
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');
}
}
}
3.编辑控制器
说明：1.这里的控制器采用的是struts2；2.这里需注意的是，前台采用的是ajax的提交方式，要让struts2以这种方式封装对象，需导入一个jar包：struts2-json-plugin-2.3.20.jar，在struts的配置文件中也需简单的设置一下，具体参见“4.编辑struts2配置文件”
//添加用户
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");
}
}
4.编辑struts2配置文件
非常简单，设置extends="json-default"即可。
<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>
大功告成，效果如下：
- 大小: 8.2 KB
分享到：
发表评论
-
easyui实现datagrid行内编辑
2015-10-02 02:21 7431easyui的datagrid行内编辑 ... -
struts2+easyui实现根据条件检索信息
2015-10-02 01:52 2040根据不同条件或组合条件检索信息是很常用的需求，下面将在stru ... -
struts2+easyui的datagrid显示列表信息
2015-10-02 01:22 2967easyui的datagrid主要用于显示列表信息，其中包含分 ... -
easyui在datagrid中显示行详情（二）
2015-10-01 22:45 1435一、引用文件 注：1.datagrid-detailview. ... -
easyui在datagrid中显示行详情（一）
2015-09-30 13:34 7077一、页面引用 <!-- 1.页面引入样式 --> ...
相关推荐
例如，使用datagrid可以轻松地展示和操作数据库中的数据，dialog则能创建弹出式窗口，form可以处理用户输入并进行验证。 案例部分通常会包含具体的实现代码，例如Controller层的处理方法、Service层的业务逻辑、...
【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景，涉及到Spring、Struts2和Hibernate（SSh）三大框架与EasyUI前端组件的整合。在这个实例中，我们将探讨如何利用这些技术来实现一个具备分页...
它提供了一套完整的组件，如表格（datagrid）、对话框（dialog）、菜单（menu）等，大大简化了网页开发的工作。在这个"easyui 的增删改查完整实例"项目中，我们将探讨如何利用EasyUI、Spring、Struts和MyBatis来构建...
- CRUD操作：通过Mapper接口调用对应的SQL方法，实现对数据库的添加、删除、修改和查询。 - 结果映射：定义结果集映射，方便将查询结果转化为Java对象。 4. **WebDemo项目结构**： - `WEB-INF`目录：存放web.xml...
- **Bean管理**: Bean的生命周期 - **事务管理**: 声明式事务 - **MVC模式**: Spring MVC的控制器、视图解析器 **10. SpringMVC** - **SpringMVC架构**: DispatcherServlet的角色 - **控制器开发**: @Controller...
EasyUI则是一个基于jQuery的用户界面插件集，它为开发者提供了丰富的组件，如表格、下拉框、树形结构、对话框等，使得创建具有专业外观的Web应用变得更加简单。EasyUI通过简单的HTML和JavaScript代码就能实现复杂的...
- **Hibernate Validator**：一个实现了JSR 303和JSR 349 Bean Validation规范的开源库，可以用于对Java对象进行约束验证，确保对象的状态满足一定的条件。 #### 十、任务调度Quartz - **Quartz**：一个全功能、...