新增模态框
开发工具与关键技术:MVC 专题技术
作者:彭春怡
撰写时间:2019/5/26
各位IT的朋友们好,今天我想给大家介绍的是新增模态框的制作。新增模态框呢,是用来添加新的数据的。填写完并保存,保存成功就是添加成功。保存失败,就是添加失败。就是一个弹出模态框。
接下来我一起了解新增模态框是怎么样完成的。
首先写一个新增操作按钮的样式。如下:
成后,就是模态框的样式代码了,下面就是模态框的样式代码:
新增模态框:
<div class="modal fade" id="modalInsetAcademe" tabindex="-1" role="dialog" aria- labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
模态框头部:
<div class="modal-header">
<h4 class="modal-title">新增学院</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
模态框主体:
<div class="modal-body">
<form id="formInsetAcademe" class="form-horizontal">
重置表单部分:
<input type="reset" hidden />
<div class="form-group form-row">
<label class="col-form-label col-3" for="IAcademeName">学院名称:</label>
<div class="col-9">
<input type="text" class="form-control" name="AcademeName" id="IAcademeName" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3" for="IAcademeCode">学院代号:</label>
<div class="col-9">
<input type="text" class="form-control" name="AcademeCode" id="IAcademeCode" />
</div>
</div>
<div class="form-group form-row justify-content-center">
<div class="col-auto">
<button type="button" class="btn btn-primary mr-2" onclick="savaInsert()">保存</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</form>
</div>
</div>
</div>
图2便是以上样式代码形成的一个模态框:
下面就是写打开模态框的功能:
function openInsert() {
$(’#formInsetAcademe input[type=“reset”]’).click();
$("#modalInsetAcademe").modal(‘show’);
}
上面是重置表单与打开模态框的部分,方法是一样的,绑定正确的数据便可。“openInsert”是上面按钮样式代码哪里给的id,“formInsetAcademe”是form标签里面的id,“modalInsetAcademe”是模态框最外层盒子的id。只要填写正确便可。
//保存新增
function savaInsert() {
//获取input输入数据
var AcademeName = $("#IAcademeName").val();
var AcademeCode = $("#IAcademeCode").val();
//判断
if (AcademeName != ‘’ && AcademeName != undefined
&& AcademeCode != ‘’ && AcademeCode != undefined) {
上面是保存按钮的功能,上面保存按钮里面的id。首先是获取input输入的AcademeName、AcademeCodede的数据。然后就是判断AcademeName、AcademeCode的数据是否完整。 $.post("/SystemManagements/Collegelnfor/InsertAcademe", { AcademeName: AcademeName, AcademeCode: AcademeCode },
获取控制器里查询方法的数据。
function (returnJson) {
if (returnJson.State == true) {
//关闭模态框
$("#modalInsetAcademe").modal(‘hide’);
//刷新table
tabAcademe = layuiTable.reload(‘tabAcademe’);
}
layer.alert(returnJson.Text);
}, "json")
}
以上是模态框关闭按钮的功能,“returnJson”是样式代码里的模态框关闭按钮的id。$("#modalInsetAcademe").modal(‘hide’);是模态框进行隐藏。hide是隐藏的功能。然后是刷新数据,最后返回数据。
else {
//提示
layer.alert('请填写完整', { title: '提示', icon: 0 });
}
}
这里是判断AcademeName、AcademeCode数据未填写完整时,就会弹出一个提示框,提示“请填写完整”。如下图:
总结:要完成整个操作还要一个插件才可以完成该功能“bootstrap.bundle.js”插件。直接引入便可。一个小功能,希望给大家带来一点帮助。