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