使用layui弹出表单的方法-创新互联

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

创新互联建站是一家集网站建设,江油企业网站建设,江油品牌网站建设,网站定制,江油网站建设报价,网络营销,网络优化,江油网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

使用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弹出表单的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

网站栏目：使用layui弹出表单的方法-创新互联
链接分享：http://cdxtjz.cn/article/cegphc.html