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