弹出新增修改模态框的两种写法

弹出新增修改模态框的两种写法

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：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");

        }

注意：以上只为页面代码写法，控制器数据代码写法无太大差异