玩转EasyUi弹出框

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

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

代码如下:

    $('#SaList').datagrid({
url: '/ForLog/WebShop/GetSaList',
queryParams: null,
pagination: true,
pageSize: ,
singleSelect:true,
showPageList: false,
pageList: [],
rownumbers: true,
nowrap: false,
height: ,
loadMsg: 'Load……',
columns: [[
{ field: 'SA', title: 'SA', width: },
{ field: 'ATDHK', title: 'Delivered from HK', width: },
{ field: 'ATAHK', title: 'ATA destination', width: },
{ field: 'HAWB', title: 'HAWB', width: },
{ field: 'STATUS', title: 'Confirm', width: },
{ field: 'ConfirmBtn', title: 'Confirm', width: ,
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: },
{ field: 'STATUS2', title: 'STATUS2', width: },
{ field: 'STATUS3', title: 'STATUS3', width: }
]]
});

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

玩转EasyUi弹出框

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

玩转EasyUi弹出框

在这里有几个小技巧。

 技巧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,效果是这样的。

玩转EasyUi弹出框

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

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

上一篇:弹出框中选项卡的运用(easyUI)


下一篇:DDOS攻击与防御