easyUI创建dialog弹框

Posted 2020-08-24 Mr_伍先生

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