玩转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',这一列,就是我自定义的列,效果如下:
当点击勾勾叉叉时,会传参,并有弹出框出来,效果如下:
在这里有几个小技巧。
技巧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弹出框的更多相关文章
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- easyui 弹出框调用外部js函数 提示“Microsoft JScript 运行时错误: 缺少对象”
昨天遇见一个很诡异的问题 我用easyui做了一个网站,其中有一个a页面和一个b页面,我通过easyui的window功能,在a页面中弹出了一个b页面,在b页面中,我用到了一个外部js的函数c,我在b ...
- jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框(Messager) http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html
<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...
- jquery easyui 弹出消息框
<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...
- 弹出框中选项卡的运用(easyUI)
先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
随机推荐
- Http之Get/Post请求区别
Http之Get/Post请求区别 1.HTTP请求格式: <request line> <headers> <blank line> [<request-b ...
- android编程常见问题-No Launcher activity found!
新手编程常见的问题: 问题表现: console提示:No Launcher activity found! The launch will only sync the application pac ...
- eclipse 下找不到或无法加载主类的解决办法[转]
转自:http://blog.sina.com.cn/s/blog_7ebc46500101gtff.html 有时候 Eclipse 会发神经,好端端的 project 就这么编译不了了,连 Hel ...
- bug集合
解决方法:vertical-align:top; 垂直对齐方式:对浮动元素无效浮动类: ie 6 7要在一行显示多个div要 给每一个元素浮动 否则会出间隙. ie6双倍边距bug 1. bug条件 ...
- 剑指offer--面试题17
题目:合并两个排序的单向链表 自己所写代码如下: ListNode* MergeSortedLists(ListNode* pHead1, ListNode* pHead2) { if(pHead1 ...
- Leetcode#143 Reorder List
原题地址 先把链表分割成前后两半,然后交叉融合 实践证明,凡是链表相关的题目,都应该当成工程类题目做,局部变量.功能函数什么的随便整,代码长了没关系,关键是清楚,不容易出错. 代码: ListNode ...
- Code First 中的 TPH TPT TPC
public class Blog { public int Id { get; set; } public DateTime Creationdate { get; set; } public st ...
- [设计模式] 19 观察者模式 Observer Pattern
在GOF的<设计模式:可复用面向对象软件的基础>一书中对观察者模式是这样说的:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.当一个 ...
- 【MongoDb--初入江湖】windows下安装MongoDb
一.windows下安装MongoDb http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/
- oracle 字符集导入、导出 、转换
导入导出及转换 导入导出是我们常用的一个数据迁移及转化工具,因其导出文件具有平台无关性,所以在跨平台迁移中,最为常用. 在导出操作时,非常重要的是客户端的字符集设置,也就是客户端的NLS_LANG设置 ...