首先写一个onclick事件,通过ajax 从后台获取数据 ,返回前台以layer.open 显示数据
遇到的难点: (1) ajax 将点击事件得到的数据传给 controller (刚学,花了40分钟)
(2)controller 将数据返回给 ajax 的 success (20分钟)
(3)layer 自定义修改 弹出框的样式 (2小时)
代码:
(1)ajax 传数据给 controller
function showExeDetail(resultId) {
$.ajax({
method:"post",
url:"${ctx}/datavalid/planDoException/findExeDetail",
data:{'resultId':resultId},
success:function(exeDetail){
layer.open({
});
}
这是以键值对的形式传给controller
controller代码:
@RequestMapping(value = "findExeDetail")
@ResponseBody
public String findExeDetail(@RequestParam(value="resultId",defaultValue="") String resultId) {
PlanDoException planDoException = new PlanDoException();
planDoException.setResultId(resultId);
PlanDoException showExeDetail = planDoExceptionService.findExeDetail(planDoException);
return showExeDetail.getExceptionInfo();
}
(2)controller 传数据给 ajax
返回给ajax 要用 json形式
@ResponseBody
return showExeDetail.getExceptionInfo(); 此时返回一个字符串,以json形式传给ajax
success:function(exeDetail){
layer.open({
});
此时 exeDetail 就是之前的 showExeDetail.getExceptionInfo();
(3)layer 改变样式
完整代码:
layer.open({
type: 1,
title:['<span style="color:white;">异常详情</span> ','background-color: #4898d5' ],
area: '300px;',
shade: 0.5,
id: 'LAY_layuipro',
moveType: 1,
btn: ['关闭'],
content: '<div id="exe_detail" class="gray-bg pace-done" style="padding: 50px; line-height: 22px; font-weight: bold;" ><p style="word-wrap:break-word; word-break:break-all;">'+exeDetail+'</p></div>',
closeBtn:1
});
1.修改 标题的背景,字体颜色
title:['<span style="color:white;">异常详情</span> ','background-color: #4898d5' ],
试了很多次,找了很多方式
2.修改弹出层文字(尤其是文字自动换行)
自动换行:p style="word-wrap:break-word; word-break:break-all;">'+exeDetail+'</p>
效果图: