layui を使用してポップアップ フォームをクリックします:
個人情報をクリックして、フォームをポップアップします:
#1. 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. ポップアップ ウィンドウがクリックされると、コントローラーはフォーム データのレンダリングを要求されます。同時に、形式
@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";
}を含む JSP ページにジャンプします。 3. コントローラーを介して、persistenceaLinfo の JSP ページにジャンプします。
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp" %><!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>内蒙古高考志愿规划-鄂尔多斯市微联网络科技有限责任公司</title>
<meta name="keywords" content="内蒙古高考志愿规划，原金钥匙高考志愿指导站，高考志愿填报，专业测评，生涯规划，高考提分，升学测评"/>
<meta name="description" content="内蒙古最专业高考志愿填报规划平台，历时八年钻研，采用三年数据精准定位，面对面一对一指导，网站系统，手工excel系统，模拟演练系统免费开放" />
<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="请输入姓名" 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="请输入邮箱" 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="text" name="middleSchool.name" value="${student.middleSchool.name}" required lay-verify="required" placeholder="请输入学校" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地区</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">语文</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">数学</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">英语</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'); //监听提交
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>以上がLauiuiを使用してフォームをポップアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
2023最新layui视频教程推荐（建议收藏）Jul 19, 2021 pm 05:22 PM以下为大家整理了前端UI框架 — layui的视频教程，不需要从迅雷、百度云之类的第三方网盘平台下载，全部在线免费观看。教程由浅入深，有前端基础的人就能学习，从安装到案例讲解，全面详细，帮助你更快更好的掌握layui框架！
如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架，提供了简洁美观的界面组件和丰富的交互体验。在开发中，我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先，我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代
如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM如何利用Layui实现图片轮播图功能现如今，图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼，吸引用户的眼球，提升用户体验。在本文中，我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先，我们需要在HTML页面中引入Layui的核心文件和样式文件：<linkrel="stylesheet"h
如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见，通过展示用户上传的图片，让用户能够方便地浏览和管理图片。为了提供更好的用户体验，一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能，同时提供具体的代码示例。首先，确保您已经引入Layui框架的CSS和JS文件。您
如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入
如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM如何使用Layui开发一个支持文件上传和下载的资源管理系统引言：随着互联网的发展，数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理，还是个人的文件存储，都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架，具有简洁明了的设计以及丰富的组件库，非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文
如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM如何利用Layui实现图片反色和亮度调节功能引言：在前端开发中，经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能，并提供具体代码实例供参考。一、Layui简介：Layui是一款优秀的前端UI框架，具有简洁、美观、易用等特点。它提供了丰富的前端组件，让开发者能够轻松搭建出精美的网站。二、准备工作：在开始之前，我
如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM如何使用Layui框架开发一个支持实时通讯的在线客服系统概述：在线客服系统是现代企业提供与客户交流的重要渠道之一，而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统，并提供具体的代码示例。一、准备工作安装Node.js：在开发环境中安装Node.js，并配置好相关环境。安装Layui：在项目中引入Lay
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ホットトピック
7433
15135952