您的位置:首页 > 产品设计 > UI/UE

一个关于LigerUI打开一个弹窗页面并将数据返回的方法

2017-09-15 16:10 435 查看
这个怎么说就类似与open,但和open还是有区别的,点击一个按钮弹出一个弹窗(也可以说是新页面)先展示一下声明的代码:

 1  function itemclick(id) {
//这是点击事件的方法传进来一个参数请忽略

         $.ligerDialog.open({         //这是打开一个页面的方法类似Open

                   url : '../followupsvc/details.action?id=' + id,    //这个就是路径(对不起大家我只会传给Coll层然后完成某些查询后将数据返回给新的弹窗)

                   height : 500,                     //这是定义窗口高度

                   width : 600,                     //宽度

                   name : 'rsvtinto',             //这是给新打开的那个页面定义一个名字,淡定马上就用到了

                   buttons : [ {                    //这个就是定义新的窗口的按钮,在这里定义了两个按钮,一个确定一个关闭

                            text : '确定',            //按钮名

                            onclick : function(item, dialog) {   
//请注意在这里也就是确定按钮里的这个方法是为了向后台传递我打开页面里的数据不用着急,一样会写的

                            $("#rsvtinto").contents().find("#saversvtinfo").submit();         
//请看第一个#的名字就是我在上面写的新开的页面名字,第二个就是我在新页面定义的,表单ID

                                                                                                                           //可以这么理解,当我点击确定时,将新打开的页面里form表单的信息提交,提交给谁别着急

                            },cls : 'l-dialog-btn-highlight'                 
//这个我也不知道,谁知道可以给我留个言

                            }, {

                            text : '关闭',                                          
 //这是关闭按钮

                            onclick : function(item, dialog) {           //这个其实没啥用就是这个方法里会怎样            
                   

                            dialog.close()                                         //这是关闭页面,点击关闭按钮,会关闭页面

                               },

                           cls : 'l-dialog-btn-highlight'

                             } ],

                          isResize : true,                                         
//不知道啥意思哈哈

                          title : "这是表头信息算是"

                         });

                    请注意一点,上一个是写在主页面的js里的,就是在主页面操作了新窗口,下面写一下后台的,在这里后台的数据会发送给新页面

                 后台代码:

        2              @RequestMapping(value = "/details")// 这个我想大家都知道就是我在上面写的发送的路径。action

                        //因为懒所以中间的代码我就不写了,主要写一下,传的方法

                        return new ModelAndView("/在这里定义新窗口的地址")

                              .addObject("abc", 这个是携带的参数)   //当然了这里是简写的方式,大家理解一下,看不懂请看一下我的ajax的文章那里有不是简写的传值方法

            

               后台代码也写完了,下一个就是新页面的代码了

        
3          <form id="saversvtinfo" action="这里是传给后台的路径" method="post"      
//想必有些人看到这里都糊涂了,1这里的ID请看主页面方法里  确定按钮的提交部分   

                            onsubmit="return messagesSending();">        //这个就是调用的方法我总不能一点击就提交吧凭啥?这里呢走了一下js文件,请参考下一个                     

                           <input type="hidden"  id="cardnum" name="cardnum" value="${requestScope.abc}"/>      
//这个其实里面有一个表格,我没复制进来在这里定义了这个input是                                                                          隐藏模式,在点击了确定提交后就将他的vai发给后台也就是上一行定义的路径,value里的是我在后台发的数据,ligerUI的取值方法

                    </form>

            下面写一下js部分,我不太清楚别的公司是否也是这样,但我这里是这样(是否有js我不确定,我这里有)

      4           

                      function messagesSending() {       //请参考3里第二行对比一下

                             var cardnum=$("#cardnum").val();        //这里就是可以写一些判断比如如果失败就弹窗之类的

                             return true;                                             //可以的话就return  true      请注意不要以为在最底下写个true就行,如果有判断语句,请在语句否则里写一个false

}

                      

                                 好了估计都懵逼了,看到我前面的数字了没?我来捋一圈,首先走的第1向后台传送数据,成功的同时将1的button中确定和取消按钮以及新窗口的架子搭了,但是没有进入他们的onclick方法里,这时候2请求的数据也已经完成了,将信息发送给3,也就是新窗口,存到表格中,在这里我没有复制,同时写一个from表单,将里面的input隐藏,同时它的value就是传过来的各个数据,点击弹窗的按钮,
aacc
进入1中的button方法里,然后进入4,如果返回true就执行!OK!

      唉好佩服我的聪明才智。。浪里小白条!!

         

                               
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐