layer是非常好用的彈窗外掛，具體參見官方文件
點選這裡進入。官方有很多示例，使用方法也非常簡單，引入官方下載的css和js就可以了。但是有時候，彈窗提醒並不能滿足我們的所有要求。例如，在獎品介面，希望點選“編輯獎品”的時候，能彈出對話方塊讓我們來填寫資訊，如下圖所示：

如何用簡潔美觀的 layer 實現這一功能呢？官方並沒有給我們提供示例，那就自己動手寫吧。下面把程式碼貼出來。

給“新增獎品”按鈕加上單擊觸發confirmUpdateAward方法

var awards = "";
functionconfirmUpdateAward(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>請輸入獲獎人數</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>"
    });
}

functionupdateAward(awardId){

    var awardUserCount = $("#awardUserCount").val();
    if(awardUserCount*1>8888 || awardUserCount*1<1){
        layer.msg('人數必須是1到8888', {
            time: 500, //0.5s後自動關閉
            // 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後自動關閉
                        // btn: ['明白了', '知道了']
                    });
                    refreshPage();
                }else{
                    layer.msg('修改失敗', {
                        time: 500, //20s後自動關閉
                        // btn: ['明白了', '知道了']
                    });
                }
            }
        });
        layer.closeAll();
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57

這裡有幾個需要注意的點：

第一：最後一定要用

layer.closeAll();

• 1

否則提交之後彈窗不會自己關閉。

第二：

<input type="number" />

• 1

只能保證使用者不能輸入字母（實際上字母e是可以輸入的，會認為是科學技術法），但是通過Json傳到後端的依舊是String型別，在做將該資訊用

Integer.valueOf();

• 1

強轉為Integer時候，一定要判斷String是否為空，否則會拋異常。

第三
這裡實際上是用到了一個js方法之間呼叫巧傳物件的方法。

當我們從資料庫取出若干條獎品記錄時，每一條記錄都應該有一個“修改”按鈕。當我們做修改的時候，使用者都希望輸入框中顯示之前的資訊，但是js的方法之間呼叫的時候，傳物件很麻煩，有什麼簡便的方法呢？

如上面的原始碼所示，我們只傳序號 i 過去。下面這段程式碼是獎品展示頁面的程式碼，我們可以看到每條記錄都有“編輯”按鈕。

$(document).ready(function() {
    refreshPage();
});

//定義全域性變數
var awards = "";

functionrefreshPage(){
    $.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);
        }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

注意看

onclick='confirmUpdateAward("+i+")'>"+"編輯"+"</span>

• 1

這句，我們只傳了i到我們最開始寫的confirmUpdateAward方法裡面，卻因為在js中定義了全域性變數 awards ，就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。

layer做資訊提交遇到的坑都寫在這裡了，應該再沒什麼別的問題了，有需要的話可以留言評論。