先看一下表单弹出框界面,点击新建就会弹出以下界面
在前台,该弹出框的网页代码是在list列表页面写的,新建弹出框不需要再用一个页面,这也节约了页面成本
弹出框页面代码如下所示,其本质就是一个div中套了form表单再套了一个table表格
只是该div样式是easyUI—dialog,该div在打开的页面是看不见的,因为其closed属性设为了TRUE,需要点击按钮开控制其打开
<!--日程表单弹出框--> <div id="schedule" class="easyui-dialog" closed="true"> <form id="schForm"> <table class="FormDialog" width="100%" cellpadding="5"> <tr> <td align="right">开始时间</td> <td> <input class="easyui-datetimebox" editable=false type="text" id="schedulebegintime" name="showschedulebegintime" data-options="required:true,showSeconds:false" style="200px;"/> </td> </tr> <tr> <td align="right">结束时间</td> <td> <input class="easyui-datetimebox" editable=false type="text" id="scheduleendtime" name="showscheduleendtime" data-options="required:true,showSeconds:false" style="200px;"/> </td> </tr> <tr> <td align="right">内 容</td> <td><input style=" 200px; height:100px" class="easyui-textbox" name="schedulenr" data-options="multiline:true"/></td> </tr> <tr> <td align="right">负 责 人</td> <td><input style=" 200px" class="easyui-textbox" id="schedulefzr" name="schedulefzr" data-options="required:true"/></td> </tr> </table> </form> </div>
网页完成了那以下就是JavaScript代码了
//弹出框更新日程 function toEdit(sid){ var schForm=$("#schForm"); var divObj=$("#schedule"); var title; if(sid==""){ title="新建日程"; schForm.form('clear'); }else{ title="修改日程"; var data = getJsonData("../getScheduleInfoById.hebe",sid); schForm.form('load', data); } showDialog(divObj,title,300,'auto',function(){ var isValid = schForm.form('validate'); if(isValid){ var url="../saveScheduleInfo.hebe"; var appendArr = [ {name:"meeting_id",value:mid} ]; if(sid){ appendArr.push({name:"id",value:sid}); } var json = schForm.serializeJson(appendArr); var jsonStr=json2str(json); var result=getTextData(url,jsonStr); if(result=="error"){ $.messager.alert("温馨提示","信息保存失败","error"); }else{ showMessageTop("操作成功!",160); $('#scList').datagrid('reload'); divObj.dialog('close'); } } },function(){ divObj.dialog('close'); }); }
该代码是通过点击修改或者新建来打开form表单弹出框。此处需要注意的是调用了一个showDialog方法,该方法是写在common.js中,因此还需要引用common.js文件。通过控制div的ID标签元素来打开弹出框。当然还要引入easyUI相关文件
该方法中有两个回调方法,一个是保存一个是取消。
因此当表单弹出框弹出后,可以填写内容,然后按保存触发更新方法,将表单数据传到后台进行保存,该实现跟传统的更新页面实现一样。只是一个有弹出框一个是页面而已,其表单操作一致。
此处后台就跟更新后台一样了,没有任何变化
注意,取消的回调方法就是关闭弹出框,至于保存数据方法是否关闭弹出框看个人需求