1.在当前页面必须有一个DIV

<!-- 保证金明细的详情列表显示 -->
<div id="dialog-alarm-detail"></div>

2.DIV这个可以弹出对话框

//DIV对象
var detailLog= $('#dialog-alarm-detail').dialog(
{
title: '保证金明细详情',
width: '60%',
height:'60%',
modal: true,
closable:true,
href: parent.parent.baseUrl+"customer/bail/bailInfo",

3.通过web端的跳转到html页面

    /**
* 进入到保证金明细的详情查询的页面
*
*/
@RequestMapping(value = "bailInfo")
public String bailInfo(Model model) {
return "user/bail/bailInfo";
}

4.在用html页面里面的元素,接收返回的内容

onLoad: function () {
$.ajax({
type: "POST",
async: false,
success: function (result) {
//新创建的格式化的表格
$('#detail').datagrid({
idField : 'id', // 只要创建数据表格 就必须要加 ifField
// title : '保证金明细详情',
width: '100%',
height:'100%',
url : parent.parent.baseUrl+'customer/bail/bailDetailsInfo?customerId='+customerId+'&&bailClass='+bailClass+'&&agencyId='+agencyId,
method : 'GET',
fitColumns : true,
striped : true, // 隔行变色特性
nowrap : false,
loadMsg : '数据正在加载,请耐心的等待...',
rownumbers : true,
sortName : 'crtTime',
sortOrder : 'desc',
rowStyler : function(index, record) {},
columns : [ [{
field : 'updTime',
title : '冻结时间',
width : 50,
align : 'center',
}, {
field : 'bailStatus',
title : '保证金冻结状态',
width : 50,
align : 'center',
formatter : statusFot
}, {
field : 'lockBail',
title : '保证金冻结金额',
width : 80,
align : 'center'
}, {
field : 'goodsName',
title : '拍卖名称',
width : 80,
align : 'center'
}]],
pagination : false,
pageSize : 10,
pageList : [ 5, 10, 15, 20, 50 ],
}); }
});
},
buttons : [ {
text : "关闭",
handler : function() {
detailLog.dialog('close');
}
} ]
});

5.通过width和hight调整样式

easyUI创建dialog弹框的更多相关文章

  1. 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态

    在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...

  2. 封装dialog弹框

    <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport&quo ...

  3. jquery Dialog弹框插件

    function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...

  4. Easyui 创建dialog的两种方式,以及他们带来的问题

    $('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...

  5. easyui 更改dialog弹出的位置

    方法一: 在弹出dialog的时候不用$('#dialogDiv').dialog('open');打开.用$('#dialogDiv').window('open');打开.再用window的res ...

  6. jquery Dialog弹框插件使用

    var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...

  7. Android Dialog弹框提示

    public void showUpdateDialog(String content) { //普通的AlertDialog对话框 AlertDialog.Builder builder = new ...

  8. JQuery EasyUI dialog弹出框的 close 和 destroy

    开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...

  9. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

随机推荐

  1. myeclipse下java文件乱码问题解决

    中文乱码是因为编码格式不一致导致的.1.进入Eclipse,导入一个项目工程,如果项目文件的编码与你的工具编码不一致,将会造成乱码.2.如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文 ...

  2. Bete冲刺第七阶段

    Bete冲刺第七阶段 今日工作: web: 新增通知处理接口 ios: 重写登录逻辑,添加创建行程填写.注册 POP界面 目前所遇问题: web: web目前进展顺利,暂时还没有遇到编码的问题. iO ...

  3. [转]oracle设计数据库应选择正确的数据类型

    原文地址:http://blog.sina.com.cn/s/blog_5014663501007n40.html 在设计数据库的时候,选择正确的数据类型,往往可以避免很多的问题,正确理解数据库的类型 ...

  4. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

  5. iOS开发中的错误整理,百思项目'我的'模块,tableFooterViewHeight的问题.提醒自己对KVO和Block的运用欠缺

    一.错误分析:由于tableFooterView中的数据是通过请求服务器后得到的,tableFooterViewHeight也是根据请求过来的数据经过布局子控件而计算出来的.(注意:计算高度是在子线程 ...

  6. 【CodeVS 3123】高精度练习之超大整数乘法 &【BZOJ 2197】FFT快速傅立叶

    第一次写法法塔,,,感到威力无穷啊 看了一上午算导就当我看懂了?PS:要是机房里能有个清净的看书环境就好了 FFT主要是用了巧妙的复数单位根,复数单位根在复平面上的对称性使得快速傅立叶变换的时间复杂度 ...

  7. 去掉iPhone、iPad的默认按钮样式 去掉高光样式:

    input[type="button"], input[type="submit"], input[type="reset"] { -web ...

  8. 自定义jstl标签库

    开发环境:Spring+SpringMVC +Maven +Mybatis JSTL 标签库的配置: 导入对应的 jstl.jar 和 standard.jar ,我使用的配置如下: <prop ...

  9. android studio-创建第一个项目

    打开android studio 开始界面和Xcode有点类似,点击New project新建一个工程,新建过程和在Eclipse上差不多,这里就不赘述了. 下面开始新建项目 填写项目名称,和存放地址 ...

  10. 【学习笔记&训练记录】数位DP

    数位DP,即对数位进行拆分,利用数位来转移的一种DP,一般采用记忆化搜索,或者是先预处理再进行转移 一个比较大略的思想就是可以对于给定的大数,进行按数位进行固定来转移记录答案 区间类型的,可以考虑前缀 ...