1. 程式人生 > >ajax + layer 做一個彈出框

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();
    } 

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

效果圖: