使用layui弹出表单的方法

小编给大家分享一下使用layui弹出表单的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、网站设计、迭部网络推广、小程序制作、迭部网络营销、迭部企业策划、迭部品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供迭部建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

使用layui点击弹出表单：

点击个人信息弹出表单：

1、首先是页面的点击弹出事件。

 $(function () {        var studentId="";        if ('${zyTb.sudentId}' != null &&'${zyTb.sudentId}' != '') {
            studentId='${zyTb.sudentId}';
        }        if ('${univcollection.studentId}' != null &&'${univcollection.studentId}' != '') {
            studentId='${univcollection.studentId}';
        }        var studentName = '';
        studentName = '${gkzyUser.name}';
 
        $("#personaLinfoButton").click(function(){
            layer.open({
                type: 2,
                 //title: '收藏管理 (考生姓名：张无忌)',
                title: '个人信息',
                 shadeClose: true,           
                 //弹出框之外的地方是否可以点击
                offset: '10%',                
                area: ['60%', '80%'],                
                content: '/gkzytb/franchiser/personaLinfo?gkzyUserId='+studentId                
                // content: '/gkzytb/franchiser/rigthColumnJsonList'
            });
        });
    });

2、当点击弹出窗口之后，请求controller来渲染form表单数据。同时跳转到包含form表单的jsp页面

 @RequestMapping("personaLinfo")    
 public String personaLinfo(Student student,Model model){
        Area area = new Area();
        area.setParent(new Area("0"));        
        List areaList1 = areaService.findList(area);
        area.setParent(areaList1.get(0));        
        List areaList2 = areaService.findList(area);
        area.setParent(areaList2.get(0));        
        List areaList3 = areaService.findList(area);        
        
        List studentList = studentService.findList(student);        
        if (studentList.size()>0) {
            model.addAttribute("student",studentList.get(0));
            model.addAttribute("gkzyUser",gkzyUserService.get(studentList.get(0).getGkzyUserId()));
        }
        model.addAttribute("areaList1",areaList1);
        model.addAttribute("areaList2",areaList2);
        model.addAttribute("areaList3",areaList3);
        model.addAttribute("table","1");        return "modules/gkzytb/personal/personaLinfo";
    }

3、通过controller跳转到persionaLinfo的jsp页面。

<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %>
    
    
    
    
    

    

        
        
        
        

            姓名
            

                
            
        
        

            性别
            

                
                
            
        
        

            民族
            

                
                
            
        
        

            邮箱
            

                
            
        
        

            学校
            

                
            
        
        

            地区
            

                
                    
                        ${area.name}
                    
                
            
            

                
                    
                        ${area.name}
                    
                
            
            

                
                    
                        ${area.name}
                    
                
            
        
        

            

                语文
                

                    
                
            
            

                数学
                

                    
                
            
            

                英语
                

                    
                
            
        
        

            

                综合
                

                    
                
            
            

                总分
                

                    
                
            
            

                投档
                

                    
                
            
        
        

            

                立即提交
                重置
            
        
    

看完了这篇文章，相信你对使用layui弹出表单的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！