wql025
- 浏览: 25600 次
-
最新评论
是否采用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 7423easyui的datagrid行内编辑 ... -
struts2+easyui实现根据条件检索信息
2015-10-02 01:52 2035根据不同条件或组合条件检索信息是很常用的需求，下面将在stru ... -
struts2+easyui的datagrid显示列表信息
2015-10-02 01:22 2963easyui的datagrid主要用于显示列表信息，其中包含分 ... -
easyui在datagrid中显示行详情（二）
2015-10-01 22:45 1431一、引用文件 注：1.datagrid-detailview. ... -
easyui在datagrid中显示行详情（一）
2015-09-30 13:34 7065一、页面引用 <!-- 1.页面引入样式 --> ...
相关推荐
在上面的例子中，我们创建了一个 `easyui-textbox` 输入框和一个 `easyui-combobox` 下拉选择框。对于 `easyui-textbox`，我们通过 `onchange` 属性直接绑定了一个名为 `handleTextboxChange` 的函数，该函数会弹出...
该资源为jquery-easyui-1.5.5版本，包含easyui插件所依赖的js和css
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本，这是一份重要的更新，可能包含了一些...
Dialog 在 EasyUI 中通过 `<div>` 标签创建，需要设置 `class="easyui-dialog"` 并添加一些基本属性，例如 `title` 为对话框标题，`href` 或 `content` 用于指定内容来源。一个简单的Dialog实例代码如下： ```...
《jQuery EasyUI EDT 1.4 Build 1：丰富的主题应用与开发详解》 jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列易于使用的组件，如表格、下拉菜单、对话框等，极大地简化了网页的用户界面开发...
2. **基本使用**：EasyUI 的组件通过类名来激活，例如，要创建一个对话框，只需将 `dialog` 类添加到元素上，然后可以通过 JavaScript 来操作这个对话框： ```html <div id="dlg" class="easyui-dialog" style=...
easyui-lang-zh_CN.js easyui-lang-zh_CN.js 页面开发,使用easyui,进行汉化使用js文件
解决easyui-datebox日期格式，只需引入此包即可，不需改源码
1. **对话框(Dialog)**：可以创建模态或非模态对话框，用于显示信息、确认操作或进行更复杂的交互。 2. **表格(Table)**：支持数据分页、排序、过滤和编辑，可以与后台数据库无缝集成，实现数据的CRUD操作。 3. **...
easyui插件的支持日期汉化，分页汉化，form表单提示汉化。
通过使用 jQuery EasyUI，开发者可以使用少量的 JavaScript 代码来实现复杂且美观的界面效果，提高了开发效率。这个名为 "jquery-easyui-1.2.5" 的压缩包文件包含了该框架的一个具体版本。 **1. jQuery EasyUI 的...
在本文中，我们将深入探讨如何在ASP.NET MVC框架下，利用EasyUI的FileBox组件实现Excel文件的上传功能。EasyUI是一个基于jQuery的用户界面库，提供了丰富的组件，如FileBox，用于处理文件选择和上传操作。而MVC...
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
easyui dialog和messager样式更改，默认样式太丑
1. **EasyUI 组件**：EasyUI 提供了多种组件，如对话框（Dialog）、表单（Form）、表格（Grid）、菜单（Menu）、树形控件（Tree）、下拉选择框（ComboBox）等，这些组件大大简化了网页界面的设计和交互实现。...
easyui日期，时间框汉化包，汉化easyui日期控件，时间控件。
link href=”jquery-easyui-1.3.2/themes/default/easyui.css” rel=”stylesheet” type=”text/css” /><!–easyui最全的样式包也可单独引用你想使用的样式包–><link href=”jquery-easyui-1.3.2/themes...
1. 学习参考：Demo提供了直观的实例，展示了组件的实际效果和用法，开发者可以通过复制和修改这些示例，快速创建自己的应用。 2. 测试验证：通过查看和运行Demo，开发者可以在实际环境中测试组件的功能和性能，确保...
在版本1.3.3中，EasyUI 继续保持着其易用性和强大的特性，使得开发人员能够更高效地实现页面布局、数据展示、用户交互等功能。 1. **基础组件** jQuery EasyUI 提供了一系列基础组件，如对话框（dialog）、表单...
`EasyUI-Portal`是一个基于JavaScript和CSS的开源框架，专为创建可定制、可拖拽的布局而设计，它使得开发人员能够轻松构建以用户为中心的Web应用程序，实现信息的集中访问。下面我们将深入探讨`EasyUI-Portal`的核心...