共用弹出层窗体(保存)

最新推荐文章于 2023-08-07 11:04:51 发布

原创最新推荐文章于 2023-08-07 11:04:51 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了一种在前端开发中高效复用弹出层窗体进行数据保存的方法，通过判断隐藏域值来智能选择新增或修改操作，简化了代码并提高了开发效率。

以前写弹出层的时候，我只会一个一个的写，如下代码

   //单表新增保存方法一
    $("#btnSaveNoticeType").click(function () {
        var formDate = $("#formNoticeType").serializeArray();
        $.post("/SystemManagement/IssuanceNotice/InsertNoticeType", formDate, function (msg) {
            if (msg.State == true) {
                layerClose();
                tabNoticeType = layuiTable.reload('tabNoticeType');
            }
            layer.alert(msg.Text);
        })
    });
    //单表修改保存方法一
    $("#btnSaveNoticeType").click(function () {           
        var formDate = $("formNoticeType").serializeArray();
        $.post("/SystemManagement/IssuanceNotice/UpdateNoticeType", formDate, function (msg) {
            if (msg.State == true) {
                layerClose();
                tabNoticeType = layuiTable.reload('tabNoticeType');
            }
            layer.alert(msg.Text);
        })
    });

现在我学到了一种新的方法，可以共用弹出层窗体(保存)，方便又好用，我现在和大家分享一下代码
首先：1、调用函数，2、判断数据不为空，3、获取隐藏域:有值,修改，没有值新增，4、无公告类型id 表单为新增，5、有公告类型id 表单为修改，6、序列化表单:(这里我们没办法决定参数的个数，新增：名称，修改：ID，名称)，用序列化serializeArray();查询的好处，没有值的时候它会自动为空，有值的时候它会自动绑定上去。

   //共用弹出层窗体新增 、修改、 保存

    $("#btnSaveNoticeType").click(function () {       
        if ($('#formNoticeType[name="NoticeTypeName"]').val() != "") {  //判断数据不为空
            var url = "";          
            var ID = $('#formNoticeType[name="NoticeTypeID"]').val();
            if (ID == "") {
                url = "/SystemManagement/IssuanceNotice/InsertNoticeType";
            }
            else {
                url = "/SystemManagement/IssuanceNotice/UpdateNoticeType";
            }
            var formDate = $("#formNoticeType").serializeArray();  //序列化表单:serializeArray
            $.post(url, formDate, function (msg) {
                if (msg.State == true) {             
                    layerClose();   //关闭窗体
                    tabNoticeType =layuiTable.reload('tabNoticeType');   //刷新table
                }
                layer.alert(msg.Text);
            })
        }
         else {  
            layer.alert('请填写完整', {icon: 0 });
        }
    });

一步步的去写代码，就能实现共用弹出层窗体(保存)了，方便理解、代码又少，建议大家使用，效果如下图

在这里插入图片描述