layer實現(xiàn)彈窗提交信息
layer是非常好用的彈窗插件,具體參見官方文檔
點擊這里進入。官方有很多示例,使用方法也非常簡單,引入官方下載的css和js就可以了。但是有時候,彈窗提醒并不能滿足我們的所有要求。例如,在獎品界面,希望點擊“編輯獎品”的時候,能彈出對話框讓我們來填寫信息,如下圖所示:
如何用簡潔美觀的 layer 實現(xiàn)這一功能呢?官方并沒有給我們提供示例,那就自己動手寫吧。下面把代碼貼出來。
給“添加獎品”按鈕加上單擊觸發(fā)confirmUpdateAward方法
var awards = ""; function confirmUpdateAward(i) { layer.open({ type: 1, closeBtn: false, shift: 7, shadeClose: true, content: "<div style='width:350px;'><div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>請輸入獎項名稱</p><input id='awardName' class='form-control' type='text' name='awardName' value='"+awards[i].awName+"'/></div>" + "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>請輸入獎項描述</p><input id='awardDescription' class='form-control' type='text' name='awardDescription' value='"+awards[i].awDescription+"'/></div>"+ "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>請輸入獲獎人數(shù)</p><input id='awardUserCount' class='form-control' type='number' name='awardUserCount' value='"+awards[i].awUserCount+"'/></div>"+ "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>請輸入獎項類別</p><input id='awardKind' class='form-control' type='text' name='awardKind' value='"+awards[i].awKind+"'/>" + "<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>" }); } function updateAward(awardId){ var awardUserCount = $("#awardUserCount").val(); if(awardUserCount*1>8888 || awardUserCount*1<1){ layer.msg('人數(shù)必須是1到8888', { time: 500, //0.5s后自動關(guān)閉 // btn: ['明白了', '知道了'] }); }else{ var awardName = $("#awardName").val(); var awardDescription = $("#awardDescription").val(); var awardKind = $("#awardKind").val(); $.ajax({ type: "post", url : getContextPath() + "/award/updateAward", dataType:'json', data: { "awardId":awardId, "awardName":awardName, "awardDescription":awardDescription, "awardUserCount":awardUserCount, "awardKind":awardKind }, success: function(data){ var updateSuccess = data.data; if(updateSuccess){ layer.msg('修改成功', { time: 500, //0.5s后自動關(guān)閉 // btn: ['明白了', '知道了'] }); refreshPage(); }else{ layer.msg('修改失敗', { time: 500, //20s后自動關(guān)閉 // btn: ['明白了', '知道了'] }); } } }); layer.closeAll(); } }
這里有幾個需要注意的點:
第一:最后一定要用
layer.closeAll();
否則提交之后彈窗不會自己關(guān)閉。
第二:
<input type="number" />
只能保證用戶不能輸入字母(實際上字母e是可以輸入的,會認(rèn)為是科學(xué)技術(shù)法),但是通過Json傳到后端的依舊是String類型,在做將該信息用
Integer.valueOf();
強轉(zhuǎn)為Integer時候,一定要判斷String是否為空,否則會拋異常。
第三:
這里實際上是用到了一個js方法之間調(diào)用巧傳對象的方法。
當(dāng)我們從數(shù)據(jù)庫取出若干條獎品記錄時,每一條記錄都應(yīng)該有一個“修改”按鈕。當(dāng)我們做修改的時候,用戶都希望輸入框中顯示之前的信息,但是js的方法之間調(diào)用的時候,傳對象很麻煩,有什么簡便的方法呢?
如上面的源碼所示,我們只傳序號 i 過去。下面這段代碼是獎品展示頁面的代碼,我們可以看到每條記錄都有“編輯”按鈕。
$(document).ready(function () { refreshPage(); }); //定義全局變量 var awards = ""; function refreshPage(){ $.ajax({ type: "post", url : getContextPath() + "/award/getAllAwards", dataType:'json', data: { }, success: function(data){ awards = data.data; var awardHtml = ""; var iLen = awards.length; //遍歷取出每一條獎品 for(var i = iLen - 1 ; i >=0 ; i--){ awardHtml+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"選中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+ awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"編輯"+"</span></td><td>" + "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"刪除"+"</span></td></tr>"; } $("#awardTable").html(awardHtml); } }); }
注意看
onclick='confirmUpdateAward("+i+")'>"+"編輯"+"</span>
這句,我們只傳了i到我們最開始寫的confirmUpdateAward方法里面,卻因為在js中定義了全局變量 awards ,就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。
layer做信息提交遇到的坑都寫在這里了,應(yīng)該再沒什么別的問題了,有需要的話可以留言評論。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile(2022年最新版)
微信在最近開始要求使用wx.getUserProfile()來獲取用戶的昵稱,頭像等信息,所以下面這篇文章主要給大家介紹了關(guān)于2022年最新版微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile的相關(guān)資料,需要的朋友可以參考下2022-11-11JavaScript前端中的偽類元素before和after使用詳解
before和after也算是css里面最常見的元素了,而我卻一直不太了解,再不學(xué)一下就真的太不像話了。所以學(xué)習(xí)一下,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02JavaScript與C# Windows應(yīng)用程序交互方法
JavaScript與C# Windows應(yīng)用程序交互方法...2007-06-06各種頁面定時跳轉(zhuǎn)(倒計時跳轉(zhuǎn))代碼總結(jié)
下面對實現(xiàn)頁面定時跳轉(zhuǎn)(也稱倒計時跳轉(zhuǎn))做一下總結(jié),以備不時之需,經(jīng)常使用的朋友可以參考下2013-10-10