注释:代码参考http://blog.51cto.com/825272560/1891158,在其修改之上而来,在此感谢!

1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面)

2.实现

  a* 页面效果图

        

b*页面代码

  --构建from表单

<div id="add-main" style="display: none;">
              <form class="layui-form" id="add-form"  action="">
                  <div class="layui-form-item center" >
                    <label class="layui-form-label" style="width: 100px" >配置名称label>
                    <div class="layui-input-block">
                      <input type="text" name="name" required value="" style="width: 240px"  lay-verify="required" placeholder="请输入配置名称" autocomplete="off" class="layui-input">
                    div>
                  div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">配置类型label>
                    <div class="layui-input-block">
                      <input type="text" name="type" required  style="width: 240px" lay-verify="required" placeholder="请输入配置类型" autocomplete="off" class="layui-input">
                    div>
                  div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">配置值label>
                    <div class="layui-input-block">
                      <input type="text" name="value" required  style="width: 240px" lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input">
                      
                    div>
                  div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="save" >立即提交button>
                      <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置button>
                    div>
                  div> 
              form>    
        div>

 

c*js代码

-创建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(){
                    
                }
            });
   } 

-核心提交方法

 

 

d*后台代码

-

         /**
     * 新增配置
     * @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;    
    }

 

最后修改于 2019-02-15 15:45:50
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇