使用layui彈出表單的方法-創(chuàng)新互聯(lián)
小編給大家分享一下使用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ò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,江油網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。使用layui點(diǎn)擊彈出表單：
點(diǎn)擊個(gè)人信息彈出表單：
1、首先是頁(yè)面的點(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: '收藏管理 (考生姓名：張無(wú)忌)',
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)擊彈出窗口之后，請(qǐng)求controller來(lái)渲染form表單數(shù)據(jù)。同時(shí)跳轉(zhuǎn)到包含form表單的jsp頁(yè)面
@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()>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、通過(guò)controller跳轉(zhuǎn)到persionaLinfo的jsp頁(yè)面。
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>內(nèi)蒙古高考志愿規(guī)劃-鄂爾多斯市微聯(lián)網(wǎng)絡(luò)科技有限責(zé)任公司</title>
<meta name="keywords" content="內(nèi)蒙古高考志愿規(guī)劃，原金鑰匙高考志愿指導(dǎo)站，高考志愿填報(bào)，專業(yè)測(cè)評(píng)，生涯規(guī)劃，高考提分，升學(xué)測(cè)評(píng)"/>
<meta name="description" content="內(nèi)蒙古最專業(yè)高考志愿填報(bào)規(guī)劃平臺(tái)，歷時(shí)八年鉆研，采用三年數(shù)據(jù)精準(zhǔn)定位，面對(duì)面一對(duì)一指導(dǎo)，網(wǎng)站系統(tǒng)，手工excel系統(tǒng)，模擬演練系統(tǒng)免費(fèi)開(kāi)放" />
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" /></head><body><div style="margin: 25px 60px 0 0;">
<form class="layui-form" action="studentInfoF">
<input type="hidden" name="id" value="${student.id}"/>
<input type="hidden" name="gkzyUserId" value="${student.gkzyUserId}"/>
<input type="hidden" name="franId" value="${student.franId}"/>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" value="${student.name}" required lay-verify="required" placeholder="請(qǐng)輸入姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性別</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="1" title="男" checked>
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">民族</label>
<div class="layui-input-block">
<input type="radio" name="nation" value="漢族" title="漢族" checked>
<input type="radio" name="nation" value="蒙族" title="蒙族">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">郵箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="${gkzyUser.email}" required lay-verify="email" placeholder="請(qǐng)輸入郵箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">學(xué)校</label>
<div class="layui-input-block">
<input type="text" name="middleSchool.name" value="${student.middleSchool.name}" required lay-verify="required" placeholder="請(qǐng)輸入學(xué)校" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地區(qū)</label>
<div class="layui-input-inline">
<select class="w_30" name="provid" lay-filter="provid">
<c:forEach items="${areaList1}" var="area">
<option value="${area.id}">${area.name}</option>
</c:forEach>
</select>
</div>
<div class="layui-input-inline">
<select class="w_30" id="cityid" name="cityid" lay-filter="cityid">
<c:forEach items="${areaList2}" var="area">
<option value="${area.id}">${area.name}</option>
</c:forEach>
</select>
</div>
<div class="layui-input-inline">
<select class="w_30" id="area" name="area.id">
<c:forEach items="${areaList3}" var="area">
<option value="${area.id}">${area.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">語(yǔ)文</label>
<div class="layui-input-inline" style="width: 127px">
<input type="text" name="chineseScore" value="${student.chineseScore}" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 50px">數(shù)學(xué)</label>
<div class="layui-input-inline" style="width: 127px">
<input type="text" name="englishScore" value="${student.englishScore}" lay-verify="required|number" autocomplete="off" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 50px">英語(yǔ)</label>
<div class="layui-input-inline" style="width: 127px">
<input type="tel" name="url" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">綜合</label>
<div class="layui-input-inline" style="width: 127px">
<input type="text" name="colligateScore" value="${student.colligateScore}" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 50px">總分</label>
<div class="layui-input-inline" style="width: 127px">
<input type="text" name="actualScore" value="${student.actualScore}" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 50px">投檔</label>
<div class="layui-input-inline" style="width: 127px">
<input type="tel" name="applyScore" value="${student.applyScore}" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center">
<div class="layui-input-block" style="margin: initial">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form></div><script type="text/javascript" language="JavaScript" src="/static/layui/layui.js" ></script><script type="text/javascript" language="JavaScript" src="/static/gkzytb/js/jquery-1.12.4.min.js" ></script></body><script>
layui.use('form', function(){ var form = layui.form; var $form = $('form'); //監(jiān)聽(tīng)提交
form.on('submit(formDemo)', function(data){
$.post('studentInfoF',data.field,function (json) {
layer.msg('修改成功!');
setTimeout(function () {
parent.location.href=parent.location.href;
},1000);
}) return false;
});
form.on('select',function (data) { if ($(data.elem).attr('name') == 'provid') {
cityEvent(data.value,'cityid');
}else if($(data.elem).attr('name') == 'cityid'){
cityEvent(data.value,'area');
}
}); function cityEvent(id, name) {
$.post('findAreaJson',{id:id},function(json){ if (json.state == 0) {
$form.find('select[id='+name+']').html("");
$.each(json.data, function (kt, vt) {
appendOptionTo($form.find('select[id='+name+']'), vt.name, vt.id);
});
form.render(); if (name == 'cityid') {
cityEvent(json.data[0].id,'area');
}
}
});
} function appendOptionTo($o, k, v) { var $opt = $("<option>").text(k).val(v);
$opt.appendTo($o);
}
});</script></html>看完了這篇文章，相信你對(duì)使用layui彈出表單的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)站名稱：使用layui彈出表單的方法-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://www.rwnh.cn/article42/cegphc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- DynamicWebTWAIN常見(jiàn)問(wèn)答合集-創(chuàng)新互聯(lián)
- 在哪里虛擬主機(jī)上的文件夾-創(chuàng)新互聯(lián)
- Java中實(shí)現(xiàn)線程的三種方式及對(duì)比_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理-創(chuàng)新互聯(lián)
- OpenLDAP如何安裝配置-創(chuàng)新互聯(lián)
- 怎么搭建PHP環(huán)境-創(chuàng)新互聯(lián)
- shell之磁盤(pán)分區(qū)腳本-創(chuàng)新互聯(lián)
- php://output與php://stdout有什么不同-創(chuàng)新互聯(lián)
- 我國(guó)網(wǎng)絡(luò)營(yíng)銷的現(xiàn)狀_網(wǎng)站建設(shè)前的市場(chǎng)分析及網(wǎng)站策劃都有什么？ 2021-09-12
- 服務(wù)網(wǎng)站建設(shè)時(shí)怎樣做出高質(zhì)量的網(wǎng)站策劃方案 2022-06-20
- 建網(wǎng)站策劃先行-企業(yè)做好網(wǎng)站策劃四步走 2021-02-13
- 上海電氣網(wǎng)站策劃方案 2023-03-27
- 好的網(wǎng)站策劃方案決定網(wǎng)站建設(shè)質(zhì)量 2021-04-27
- 企業(yè)網(wǎng)站策劃需要在哪些方面下功夫 2021-11-07
- 淺析網(wǎng)站策劃六點(diǎn)注意事項(xiàng) 2022-03-24
- 網(wǎng)站策劃對(duì)推廣有何影響? 2023-03-22
- 企業(yè)網(wǎng)站策劃方案怎么寫(xiě) 2016-11-03
- 網(wǎng)站策劃四點(diǎn)必須知道 2016-11-04
- 成都網(wǎng)站建設(shè)之初網(wǎng)站策劃的重要性 2016-09-15
- 企業(yè)網(wǎng)站策劃誤區(qū) 2022-05-23