玩轉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,效果是這樣的。

彈出窗口已關閉，頁面上只有信息提示按鈕，點一下，這個事件就走完了。

 

全劇終，謝謝觀看，請隨手點擊推薦。