如何使用layer弹窗和layui表单实现新增功能

1、需求：使用layer在弹窗内完成新增，成功后提示并刷新页面（父页面，list页面）

创新互联-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、雅安服务器托管、等保安全、私有云建设等企业级互联网基础服务，欢迎咨询：13518219792

2、实现

页面效果图

页面代码：

构建from表单

              

                  

                    配置名称
                    

                      
                    
                  
                  

                    配置类型
                    

                      
                    
                  
                  

                    配置值 
                    

                      
                      
                    
                  
                  

                    

                      立即提交
                      重置
                    
                  
 
              
    
        

创建layer弹窗

function onAddBtn(){
         //页面层-自定义
        layer.open({
                type: 1,
                title:"新建配置",
                closeBtn: false,
                shift: 2,
                area: ['400px', '300px'],
                shadeClose: true,
               // btn: ['新增', '取消'],
               // btnAlign: 'c',
                content: $("#add-main"),
                success: function(layero, index){},
                yes:function(){
                    
                }
            });
   }

核心提交方法

后台代码

/**
     * 新增配置
     * @return
     */
    @RequestMapping("/add1")
    @ResponseBody
    public ResultEntity addItem(ZkGolbal golbal) {
        ResultEntity res = new ResultEntity();
        try {
            golbal.setStatus("1");
            res.setData(golbalService.addItem(golbal));
            res.setSuccess("success");
            res.setMessage("新增成功");
        } catch (Exception e) {
            res.setMessage("操作失败");
            e.printStackTrace();
        }
        return res;    
    }

以上就是使用layer弹窗和layui表单做新增功能的方法的详细内容，更多请关注创新互联其它相关文章！