弹出新增修改模态框的两种写法
弹出新增修改模态框的两种写法
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:Adobe JavaScript
作者:陈钰桃
撰写时间:2020年9月6日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第一种方法(新增修改使用两个HTML模态框)
成果图
新增模态框(html)需要引用bootstrap 框架样式表
课内笔记、
modal 模态框
fade 淡入淡出效果
data-backdrop="static" 禁止点击弹框外的阴影处时关闭弹框
data-keyboard="false" 禁止点击esc键关闭弹框
insertModal 打开/关闭模态框时,需要调用的ID
aria-hidden="true" 告诉浏览器这是隐藏区域
tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" 网站阅读器需要的(盲人阅读器) 现在用不到 以后做项目需要
col-3 占用弹框页面3份
col-9 占用弹框页面9份
------------------Javascript-----------------
弹出新增模态框
function openInsertModal() {
//重置表单
//方法一
//javascript写法
document.getElementById("formInsert").reset();
//方法二
//$("#formInsert input[type='reset']").click(); //使用jquery
//打开模态框
$("#insertModal").modal('show'); //使用jquery
}
修改模态框(html)需要引用bootstrap 框架样式表
-----------------Javascript------------------
//打开修改模态框
function openUpdateModal(academeID) {
//根据学院ID查询学院信息
//javascript 写法
//从表格获取数据(可以获取)一般不使用在修改
//从数据获取数据 虽然会导致性能有所消耗,但是可以保证数据的准确性、安全性,数据最新状态
//var formData = new FormData();
//控制器接收的是前面双引号内的参数 两个ID必须一样 academeId
//formData.append("academeId", academeID);
var xhr = new XMLHttpRequest();
//原生代码:get 请求 不会自己拼接路径所以需要手动拼接Id post请求可以自动拼接
//ajax封装 get请求可以自己拼接路径
xhr.open("get", "@Url.Content("~/BaseInfoManage/Academe/SelectAcademeById?academeId=")" + academeID);
//xhr.open("post", "@Url.Content("~/BaseInfoManage/Academe/SelectAcademeById")");
xhr.onload = function () {
//获取返回值(对象转为JSON格式数据)
var jsonData = JSON.parse(xhr.responseText);
if (jsonData != null) {
//回填数据
document.getElementById("academeIDU").value = jsonData.academeID;
document.getElementById("academeNameU").value = jsonData.academeName;
document.getElementById("academeCodeU").value = jsonData.academeCode;
//打开模态框
$("#updateModal").modal('show');
} else {
layer.alert("数据异常,稍后再试");
}
};
//get请求可以不需要参数 formData
xhr.send();
//post请求
//xhr.send(formData);
}
第二种方法(新增修改使用同一个HTML模态框)
成果图
新增 修改 模态框(同一个模态框 HTML)需要引用bootstrap 框架样式表
-----------------------Javascript--------------------------
//打开新增模态框
function openInsertModal() {
//重置表单
document.getElementById("formSpecialty").reset();
//强制专业ID等于0(出现问题所在)
document.getElementById("specialtyID").value = 0;
//设置模态框的标题
document.getElementById("modalTitle").innerText = "新增专业";
//打开模态框
$("#specialtyModal").modal('show');
}
//打开修改模态框
function openUpdateModal(specialtyID) {
//重置表单
document.getElementById("formSpecialty").reset();
//设置模态框的标题
document.getElementById("modalTitle").innerText = "修改专业";
//根据id查询专业信息
ajax("@Url.Content("~/BaseInfoManage/Specialty/SelectSpecialtyByID")",
{
specialtyID: specialtyID
}, function (jsonObj) {
if (jsonObj != null) {
//回填数据
document.getElementById("specialtyID").value = jsonObj.specialtyID;
document.getElementById("academeID").value = jsonObj.academeID;
document.getElementById("specialtyName").value = jsonObj.specialtyName;
document.getElementById("specialtyCode").value = jsonObj.specialtyCode;
//打开模态框
$("#specialtyModal").modal('show');
} else {
layer.alert("参数异常");
}
}, "post");
}
注意:以上只为页面代码写法,控制器数据代码写法无太大差异