弹出框表单的运用

先看一下表单弹出框界面，点击新建就会弹出以下界面

 

在前台，该弹出框的网页代码是在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="width: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="width:200px;"/>
                </td>
            </tr>
            <tr>
                <td align="right">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容</td>
                <td><input style="width: 200px; height:100px"
                           class="easyui-textbox" name="schedulenr"
                           data-options="multiline:true"/></td>
            </tr>
            <tr>
                <td align="right">负&nbsp;&nbsp;责&nbsp;&nbsp;人</td>
                <td><input style="width: 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相关文件

该方法中有两个回调方法，一个是保存一个是取消。

因此当表单弹出框弹出后，可以填写内容，然后按保存触发更新方法，将表单数据传到后台进行保存，该实现跟传统的更新页面实现一样。只是一个有弹出框一个是页面而已，其表单操作一致。

此处后台就跟更新后台一样了，没有任何变化

注意，取消的回调方法就是关闭弹出框，至于保存数据方法是否关闭弹出框看个人需求