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調整樣式