ajax + layer 做一个弹出框

首先写一个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();
   }

扫描二维码关注公众号，回复： 2823622 查看本文章

（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>

效果图：

ajax + layer 做一个弹出框

猜你喜欢