一个模态框两个用处

开发工具与关键技术：vs mvc
​
撰写时间：2019年6月 17日

利用同一个模态框就实现新增和修改的功能，但是有个很重要的前提是新增模态框里的form表单内容跟修改里的form表单内容是一样的，在给上id，因为这个模态框既要做新增又要做修改的，修改还要用到主键ID，所以就必须添加上隐藏域。在这里就只是说下js的代码，新增、修改在控制器的代码就不展示了。
因为要判断是否新增操作，就写个全局变量，true就是新增，false就是修改，这样就可以利用if else 来进行新增、修改的js代码了。
第一个肯定是要打开模态框的。新增的就四个步骤：
function openInStuModel() {
bInsert = true; //是否是新增操作
$("#modShip .modal-title").text(“新增船舶信息”);//给模态框命名
$("#frmShip input[type=‘reset’]").click();//重置表单
$("#modShip").modal();//弹出模态框
}新增的还是比较简单易懂的，但修改的就要比新增麻烦了一些。
打开修改的模态框比新增的多了数据回填，在你要修改时肯定得有数据才能修改的，所以就需要回填数据信息。其它的步骤都差不多一样。
functionopenUpStuModel(shipsID) {
bInsert = false;
$.ajaxSettings.async = false;
$("#frmShip input[type=‘reset’]").click();//重置表单
$("#modShip .modal-title").text(“修改船舶信息”); //表头命名
$("#modShip").modal();//弹出模态框
//回填数据
$.ajax({
type: ‘post’,
url: ‘UpShip?shispID=’ + shipsID,
dataType: ‘json’,
success: function (data) {
$("#ShipID").val(data.ShipID);
$(“input[name=‘ShipCode’]”).val(data.ShipCode);}});}
这样就完成了打开模态框的操作，最后是对新增和修改的保存。
function savaShip() {
var ShipCode = $(“input [name=‘ShipCode’]”).val();
var ChineseName = $("#frmShip [name=‘ChineseName’]").val();
if(ChineseName!=""&&ChineseName!=undefined){
if(bInsert){ var formData = new FormData(document.getElementById(“frmShip”));
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject(“Microsoft.XMLHTTP”)
}
xhr.open(“POST”, “InsetrShip”);xhr.send(formData) xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt =xhr.responseText;//返回一个json对象
var jsObj =JSON.parse(txt);///json对象转换为js对象
if (jsObj.State) {//jsObj.State判断数据是否修改成功
$("#modShip").modal(“hide”);//关闭模态窗体
layer.alert(jsObj.Text,{ icon: 1, offset: ‘150px’, skin: ‘layui-layer-molv’, closeBtn: 0 });//弹出提示框
sectship();} }
}else{//修改信息
var formData = new FormData(document.getElementById(“frmShip”));
var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr=new ActiveXObject(“Microsoft.XMLHTTP”)
}
xhr.open(“post”, “UpdataSip”);
xhr.send(formData);
xhr.onreadystatechange = function () {
}
}else{
layer.alert(“数据填写不完整，请检查无误后提交”, { icon: 1 });
} }
这样就可以完成同一个模态框可以完成新增和修改的功能，也可以缩小代码量，就到这里。