玩转EasyUi弹出框

这两天在搞EasyUi的弹出框，弹出框之前也搞过很多个版本，总是觉得不那么完美，刚好最近有时间，就往多处想了想，功能基本上达到我的预期，并且在开发过程中遇到很多小技巧，特撰文如下。

走起：在EasyUi的Grid中插入自定义列。

代码如下：

    $(\'#SaList\').datagrid({
        url: \'/ForLog/WebShop/GetSaList\',
        queryParams: null,
        pagination: true,
        pageSize: 15,
        singleSelect:true,
        showPageList: false,
        pageList: [15],
        rownumbers: true,
        nowrap: false,
        height: 400,        
        loadMsg: \'Load……\',
        columns: [[
                    { field: \'SA\', title: \'SA\', width: 80 },
                    { field: \'ATDHK\', title: \'Delivered from HK\', width: 80 },
                    { field: \'ATAHK\', title: \'ATA destination\', width: 80 },
                    { field: \'HAWB\', title: \'HAWB\', width: 80 },
                    { field: \'STATUS\', title: \'Confirm\', width: 120 },
                    { field: \'ConfirmBtn\', title: \'Confirm\', width: 50,
                        formatter: function(val, rowData) {                            
                            return "<a href=\"javascript:openDialog(\'" + rowData.SA + "-OK\\');\"><img  src=\'../Scripts/EasyUi/themes/default/images/tree_dnd_yes.png\'  /></a> <a href=\"javascript:openDialog(\'" + rowData.SA + "-NOK\\');\"><img  src=\'../Scripts/EasyUi/themes/default/images/tree_dnd_no.png\'  /></a> "; 
                        }
                    },
                    { field: \'STATUS1\', title: \'STATUS1\', width: 120 },
                    { field: \'STATUS2\', title: \'STATUS2\', width: 120 },
                    { field: \'STATUS3\', title: \'STATUS3\', width: 120 }
                ]]
    });

请注意 field: \'ConfirmBtn\'，这一列，就是我自定义的列，效果如下：

当点击勾勾叉叉时，会传参，并有弹出框出来，效果如下：

在这里有几个小技巧。

　技巧1，弹出框的内容是用本页面Div呢，还是iframe？

　　如果我用本页面Div，那弹出框如何接收新传入的参数，如弹框上的SA号和状态，都是需要传参过来的。

　　正因为本页面Div无法满足接收传参且页面不刷新，所以我使用了iframe。

　　代码如下：

function openDialog(id) {
    $(\'#openReceiveFeedBack\')[0].src = \'ReceiveFeedback/\' + id;
    $(\'#ReceiveFeedBackDialog\').dialog(\'open\');
}

<div id="ReceiveFeedBackDialog" class="easyui-dialog" closed="true" buttons="#dlg-buttons" title="标题" style="width:500px;height:350px;">
     <iframe scrolling="auto" id=\'openReceiveFeedBack\' name="openReceiveFeedBack" frameborder="0"  src="" style="width:100%;height:98%;"></iframe>
</div> 
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" onclick="formSubmit();">Save</a> <a href="#"
            class="easyui-linkbutton" onclick="closeDialog();">Close</a>
    </div>

技巧2，如弹框页面所示，Save按钮是在父级页面上的，而Form表单是在iframe页中的，父级页面需要调用框架页的提交事件。

我的代码是这样写的：

    function formSubmit() {
        frames["openReceiveFeedBack"].document.forms["form1"].submit();
    }

技巧3，如果我对Input如下定义：disabled="disabled"，那么在后台无法接收到此input，所以我改为：readonly="readonly"

技巧4，页面提交成功后，我希望给出成功的提示，并且弹出窗口自动关闭。

　　通常Mvc返回的要么是字符，要么是简单的JS提示，不足以关闭父级页面。

　　所以这里又使用了一个小技巧，返回Js代码，调用父级页面的关闭函数。

　　后台代码是这样的。

        public ActionResult ReceiveFeedbackForm(FormCollection collection)
        {   
            orderDal.AddSaReceive(collection["txtSa"], collection["txtStatus"], collection["txtReason"],new CurrentUser().UserInfo.LoginName);
            return Content(@"<script>parent.ShowMsg();</script>", "text/html");
        }

调用的父级页面代码是这样的。

function closeDialog() {
    $(\'#ReceiveFeedBackDialog\').dialog(\'close\');
}

function ShowMsg() {
    $.messager.alert(\'Success\', \'Save Success!\');
    closeDialog();
}

So,效果是这样的。

弹出窗口已关闭，页面上只有信息提示按钮，点一下，这个事件就走完了。

 

全剧终，谢谢观看，请随手点击推荐。