easyUI创建dialog弹框

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调整样式