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>
效果圖: