PHP前端开发

怎么使用layui弹出表单

百变鹏仔 1个月前 (11-16) #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<area> areaList1 = areaService.findList(area);        area.setParent(areaList1.get(0));                List<area> areaList2 = areaService.findList(area);        area.setParent(areaList2.get(0));                List<area> areaList3 = areaService.findList(area);                        List<student> studentList = studentService.findList(student);                if (studentList.size()&gt;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";    }</student>

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

nbsp;html&gt;    <meta>    <title>内蒙古高考志愿规划-鄂尔多斯市微联网络科技有限责任公司</title>    <meta>    <meta>    <link><div>    <form>        <input>        <input>        <input>        <div>            <label>姓名</label>            <div>                <input>            </div>        </div>        <div>            <label>性别</label>            <div>                <input>                <input>            </div>        </div>        <div>            <label>民族</label>            <div>                <input>                <input>            </div>        </div>        <div>            <label>邮箱</label>            <div>                <input>            </div>        </div>        <div>            <label>学校</label>            <div>                <input>            </div>        </div>        <div>            <label>地区</label>            <div>                <select>                    <foreach>                        <option>${area.name}</option>                    </foreach>                </select>            </div>            <div>                <select>                    <foreach>                        <option>${area.name}</option>                    </foreach>                </select>            </div>            <div>                <select>                    <foreach>                        <option>${area.name}</option>                    </foreach>                </select>            </div>        </div>        <div>            <div>                <label>语文</label>                <div>                    <input>                </div>            </div>            <div>                <label>数学</label>                <div>                    <input>                </div>            </div>            <div>                <label>英语</label>                <div>                    <input>                </div>            </div>        </div>        <div>            <div>                <label>综合</label>                <div>                    <input>                </div>            </div>            <div>                <label>总分</label>                <div>                    <input>                </div>            </div>            <div>                <label>投档</label>                <div>                    <input>                </div>            </div>        </div>        <div>            <div>                <button>立即提交</button>                <button>重置</button>            </div>        </div>    </form></div><script></script><script></script><script>    layui.use(&#39;form&#39;, function(){        var form = layui.form;        var $form = $(&#39;form&#39;);        //监听提交        form.on(&#39;submit(formDemo)&#39;, function(data){            $.post(&#39;studentInfoF&#39;,data.field,function (json) {                layer.msg(&#39;修改成功!&#39;);                setTimeout(function () {                    parent.location.href=parent.location.href;                },1000);            })            return false;        });        form.on(&#39;select&#39;,function (data) {            if ($(data.elem).attr(&#39;name&#39;) == &#39;provid&#39;) {                cityEvent(data.value,&#39;cityid&#39;);            }else if($(data.elem).attr(&#39;name&#39;) == &#39;cityid&#39;){                cityEvent(data.value,&#39;area&#39;);            }        });        function cityEvent(id, name) {            $.post(&#39;findAreaJson&#39;,{id:id},function(json){                if (json.state == 0) {                    $form.find(&#39;select[id=&#39;+name+&#39;]&#39;).html("");                    $.each(json.data, function (kt, vt) {                        appendOptionTo($form.find(&#39;select[id=&#39;+name+&#39;]&#39;), vt.name, vt.id);                    });                    form.render();                    if (name == &#39;cityid&#39;) {                        cityEvent(json.data[0].id,&#39;area&#39;);                    }                }            });        }        function appendOptionTo($o, k, v) {            var $opt = $("<option>").text(k).val(v);            $opt.appendTo($o);        }    });</script>

推荐:layui框架教程