这两天在搞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,效果是这样的。
弹出窗口已关闭，页面上只有信息提示按钮，点一下，这个事件就走完了。
全剧终，谢谢观看，请随手点击推荐。
相关文章
暂无评论...
致力于称为最好的程序员导航网站