- 浏览: 25548 次
最新评论
是否采用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>
大功告成,效果如下:
发表评论
-
easyui实现datagrid行内编辑
2015-10-02 02:21 7416easyui的datagrid行内编辑 ... -
struts2+easyui实现根据条件检索信息
2015-10-02 01:52 2031根据不同条件或组合条件检索信息是很常用的需求,下面将在stru ... -
struts2+easyui的datagrid显示列表信息
2015-10-02 01:22 2952easyui的datagrid主要用于显示列表信息,其中包含分 ... -
easyui在datagrid中显示行详情(二)
2015-10-01 22:45 1426一、引用文件 注:1.datagrid-detailview. ... -
easyui在datagrid中显示行详情(一)
2015-09-30 13:34 7052一、页面引用 <!-- 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.5.2-build1 jquery-easyui-EDT-1.5.2-build1
《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. **...
通过使用 jQuery EasyUI,开发者可以使用少量的 JavaScript 代码来实现复杂且美观的界面效果,提高了开发效率。这个名为 "jquery-easyui-1.2.5" 的压缩包文件包含了该框架的一个具体版本。 **1. jQuery EasyUI 的...
easyui插件的支持日期汉化,分页汉化,form表单提示汉化。
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
在本文中,我们将深入探讨如何在ASP.NET MVC框架下,利用EasyUI的FileBox组件实现Excel文件的上传功能。EasyUI是一个基于jQuery的用户界面库,提供了丰富的组件,如FileBox,用于处理文件选择和上传操作。而MVC...
easyui dialog和messager样式更改,默认样式太丑
1. **EasyUI 组件**:EasyUI 提供了多种组件,如对话框(Dialog)、表单(Form)、表格(Grid)、菜单(Menu)、树形控件(Tree)、下拉选择框(ComboBox)等,这些组件大大简化了网页界面的设计和交互实现。...
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,开发者可以在实际环境中测试组件的功能和性能,确保...
`EasyUI-Portal`是一个基于JavaScript和CSS的开源框架,专为创建可定制、可拖拽的布局而设计,它使得开发人员能够轻松构建以用户为中心的Web应用程序,实现信息的集中访问。下面我们将深入探讨`EasyUI-Portal`的核心...
easyui日期,时间框汉化包,汉化easyui日期控件,时间控件。