新增与删除公用模态框

              新增与删除公用模态框

开发工具与关键技术：Vs   MVC  
作者：彭春怡
撰写时间：2019/6/15

大家好，今天给大家介绍一个，新增与修改公用一个模态框的写法。其实这个在我们制作项目的阶段中，用的人并不多，因为大家都觉得很混乱。所以用的人呢不多。其实跟分开用也差不多的，只要理解就可以了。不过，我的选择新增与修改公用一个模态框的时候，都是制作一个表的新增与修改时，我才会选择用。如果是多表新增与修改的话，我也不会选择新增与修改公用一个模态框，因为这样容易混乱。建议大家如果选择新增与修改公用一个模态框的话，最好是在新增、修改一个表的提前下使用。
好了，接下来让我们来了解单表公用新增修改模态框吧。
下面我用我最近制作的新增与修改公用模态框跟大家分析，新增与修改模态框是如何完成的。
样式代码就不跟大家进行分析了，相信这个大家会看明白的：

这一段样式代码是页面的基本样式，还有新增按钮的样式。重点新增按钮是用id获取的，而不是onclick.


以上俩张图片是连接在一起的，就是它的样式代码。重点保存按钮跟上面的新增按钮一样是用id获取的。

下面是模态框的功能代码：
新增点击事件：

1. 这里是新增类型信息点击事件，首先获取新增按钮的id，click点击事件。
   $("#insertNoticeItemName").click(function () {

2.然后是重置表单，获取表单的id，重置表单。
$(’#formNoticeItemName input[type=“reset”]’).click();

3.声明checkStatus，设置基础参数id对应的值。
var checkStatus = layuiTable.checkStatus(‘tabProjectType’); //‘tabProjectType’

4.判断checkStatus的数据length是否等于1。等于1就举行下面的数据。
if (checkStatus.data.length == 1) {

5. 获取选中行的id“ItemTypeTableID”。
   var ItemTypeTableId = checkStatus.data[0].ItemTypeTableID;

6.设置隐藏域中的ID。
$(’#formNoticeItemName [name=“ItemTypeTableID”]’).val(ItemTypeTableId)；

7.最后是弹出模态框了，content: $("#layerNoticeItemName")获取模态框最外层盒子的id，其它的是模态框的基本调试
layerIndex = layer.open({
type: 1,
area: [“500px”, “350px”],
offset: “auto”,//默认坐标，即垂直水平居中
title: “新增类型信息”,
content: $("#layerNoticeItemName")
});
}
});

修改点击事件：
function updateItemName(ItemNameId) {
$.post("/SystemManagements/IssuanceNotice/TypeModification",
{ ItemNameId: ItemNameId }, function (data) {
loadDatatoForm(“formNoticeItemName”, data);
});
layerIndex = layer.open({
type: 1,
area: [“500px”, “350px”],
offset: “auto”,
title: “修改类型信息”,
content: $("#layerNoticeItemName")
});
}
新增跟修改点击事件是一样的，就是修改需要回填，所以多了一个简单得回填的方法：“post”.这个大家应该都会。上面的连接是控制器里查询得回填信息。根据json对象填充form表单便可。

下面就是重点新增保存与修改保存一起的写法：

1．获取模态框的保存按钮，写应该点击事件：
$("#btnSaveItemName").click(function () {
2.判断你需要新增与修改的是不为空，这里呢我是首先声明字段在判断的，当然你也可以直接判断。
var ProjectTypeCode = $(’#formProjectType [name=“ProjectTypeCode”]’).val();
var ProjectType = $(’#formProjectType [name=“ProjectType”]’).val();

            if (ProjectTypeCode != "" && ProjectType != "") { 
                var url = ""; 

3.获取隐藏ID，判断是否有值。
var ID = $(’#formProjectType [name=“ItemTypeTableID”]’).val();

4.如果判断隐藏ID没有值就新增，下面是控制器新增的新增的连接，就一个单表新增，这个大家都会得跟平常一样。
if (ID == “”) {
url = “/SystemOperation/PersonnelSettings/ConsumptionNew”;
}

5.如果判断隐藏ID有值就进行修改，下面是控制器得单表修改。
else {
url = “/SystemOperation/PersonnelSettings/UpdateNoticeType”;
}

7.然后下面序列化表单：
var formDate = $("#formProjectType").serializeArray();
6.下面是提交表单，用“post”提交方法，State等于true就是成功：
$.post(url, formDate, function (msg) {
if (msg.State == true) {

7.模态框窗口自动关闭：
layerClose();

8.刷新表格：
tabProjectType = layuiTable.reload(‘tabProjectType’);
}

9.返回表单：
layer.alert(msg.Text);
})
}

10.如果数据填写不完整，弹出一个提示框，提示“请填写完整”。
else {
layer.alert(‘填写完整’, { icon: 0 });

留言：以上是我最近认识的一个模态框的写法，希望可以给大家带来一点帮助，如有不对的地方请指教，谢谢。