layer弹窗内添加文本框

谁践踏了优雅 2022-06-10 10:58 252阅读 0赞

layer是非常好用的弹窗插件，具体参见官方文档   
官方有很多示例，使用方法也非常简单，引入官方下载的css和js就可以了。但是有时候，弹窗提醒并不能满足我们的所有要求。例如，在奖品界面，希望点击“编辑奖品”的时候，能弹出对话框让我们来填写信息，如下图所示：

![这里写图片描述][SouthEast]

如何用简洁美观的 layer 实现这一功能呢？官方并没有给我们提供示例，那就自己动手写吧。下面把代码贴出来。

给“添加奖品”按钮加上单击触发confirmUpdateAward方法

这里有几个需要注意的点：

第一：最后一定要用

layer.closeAll();
     
      
       1
      
     
      
       1

否则提交之后弹窗不会自己关闭。

第二：

<input type="number" />
     
      
       1
      
     
      
       1

只能保证用户不能输入字母（实际上字母e是可以输入的，会认为是科学技术法），但是通过Json传到后端的依旧是String类型，在做将该信息用

Integer.valueOf();
     
      
       1
      
     
      
       1

强转为Integer时候，一定要判断String是否为空，否则会抛异常。

第三   
这里实际上是用到了一个js方法之间调用巧传对象的方法。

当我们从[数据库][Link 1]取出若干条奖品记录时，每一条记录都应该有一个“修改”按钮。当我们做修改的时候，用户都希望输入框中显示之前的信息，但是js的方法之间调用的时候，传对象很麻烦，有什么简便的方法呢？

如上面的源码所示，我们只传序号 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); } }); }
     
      
       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
      
     
      
       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
      
     
      
       1

这句，我们只传了i到我们最开始写的confirmUpdateAward方法里面，却因为在js中定义了全局变量 awards ，就可以巧妙地在confirmUpdateAward方法中使用awards\[i\]了。

[转载内容详情点击打开链接][Link 2]

转载内容详情点击打开链接

[SouthEast]: /images/20220610/2da7d24187c144048fb30eeef5834fcc.png
[Link 1]: http://lib.csdn.net/base/mysql
[Link 2]: http://blog.csdn.net/antony9118/article/details/53575597