小編給大家分享一下使用layui彈出表單的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),江油企業(yè)網(wǎng)站建設(shè),江油品牌網(wǎng)站建設(shè),網(wǎng)站定制,江油網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,江油網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

使用layui點(diǎn)擊彈出表單：

點(diǎn)擊個(gè)人信息彈出表單：

1、首先是頁面的點(diǎn)擊彈出事件。

$(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: '個(gè)人信息',
                 shadeClose: true,           
                 //彈出框之外的地方是否可以點(diǎn)擊
                offset: '10%',                
                area: ['60%', '80%'],                
                content: '/gkzytb/franchiser/personaLinfo?gkzyUserId='+studentId                
                // content: '/gkzytb/franchiser/rigthColumnJsonList'
            });
        });
    });

2、當(dāng)點(diǎn)擊彈出窗口之后，請求controller來渲染form表單數(shù)據(jù)。同時(shí)跳轉(zhuǎn)到包含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跳轉(zhuǎn)到persionaLinfo的jsp頁面。

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

    

        
        
        
        

            姓名
            

                
            
        
        

            性別
            

                
                
            
        
        

            民族
            

                
                
            
        
        

            郵箱
            

                
            
        
        

            學(xué)校
            

                
            
        
        

            地區(qū)
            

                
                    
                        ${area.name}
                    
                
            
            

                
                    
                        ${area.name}
                    
                
            
            

                
                    
                        ${area.name}
                    
                
            
        
        

            

                語文
                

                    
                
            
            

                數(shù)學(xué)
                

                    
                
            
            

                英語
                

                    
                
            
        
        

            

                綜合
                

                    
                
            
            

                總分
                

                    
                
            
            

                投檔
                

                    
                
            
        
        

            

                立即提交
                重置
            
        
    

看完了這篇文章，相信你對使用layui彈出表單的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：使用layui彈出表單的方法-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/cegphc.html