layer
是非常好用的弹窗插件，具体参见官方文档 nofollow" target="_blank" href="http://layer.layui.com/">点击这里进入。官方有很多示例，使用方法也非常简单，引入官方下载的css和js就可以了。但是有时候，弹窗提醒并不能满足我们的所有要求。例如，在奖品界面，希望点击“编辑奖品”的时候，能弹出对话框让我们来填写信息，如下图所示：
如何用简洁美观的 layer 实现这一功能呢？官方并没有给我们提供示例，那就自己动手写吧。下面把代码贴出来。
给“添加奖品”按钮加上单击触发confirmUpdateAward方法
<div class="jb51code">
<pre class="brush:js;">
var awards = "";
function confirmUpdateAward(i) {
layer.open({
type: 1,closeBtn: false,shift: 7,shadeClose: true,content: "
请输入奖项名称
"
请输入奖项描述
"
请输入获奖人数
"
请输入奖项类别
" +"
});
}
function updateAward(awardId){
var awardUserCount = $("#awardUserCount").val();
if(awardUserCount1>8888 || awardUserCount1<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('修改失败',//20s后自动关闭
// btn: ['明白了','知道了']
});
}
}
});
layer.closeAll();
}
}
这里有几个需要注意的点：
第一：
最后一定要用
否则提交之后弹窗不会自己关闭。第二：
只能保证用户不能输入字母（实际上字母e是可以输入的，会认为是科学技术法），但是通过Json传到后端的依旧是String类型，在做将该信息用
强转为Integer时候，一定要判断String是否为空，否则会抛异常。第三：
当我们从数据库取出若干条奖品记录时，每一条记录都应该有一个“修改”按钮。当我们做修改的时候，用户都希望输入框中显示之前的信息，但是js的方法之间调用的时候，传对象很麻烦，有什么简便的方法呢？
如上面的源码所示，我们只传序号 i 过去。下面这段代码是奖品展示页面的代码，我们可以看到每条记录都有“编辑”按钮。
var awards = "";
function refreshPage(){
$.ajax({
type: "post",url : getContextPath() + "/award/getAllAwards",data: {
},success: function(data){
awards = data.data;
var awardHtml = "";
var iLen = awards.length;
//遍历取出每一条奖品
for(var i = iLen - 1 ; i >=0 ; i--){
awardHtml+="<tr><td>"+"选中"+"</td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+
awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td>"+"编辑"+"</td><td>" +
""+"删除"+"</td></tr>";
}
$("#awardTable").html(awardHtml);
}
});
}
注意看
"+"编辑"+"
这句，我们只传了i到我们最开始写的confirmUpdateAward方法里面，却因为在js中定义了全局变量 awards ，就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。
