首页 > 其他分享 >关于layui弹出层关闭和弹出层表格使用代理方式提交的小结

关于layui弹出层关闭和弹出层表格使用代理方式提交的小结

时间:2022-08-21 13:34:56浏览次数:72  
标签:function layer indexAdd form layui 分类 出层 add 小结

var indexAdd = null;
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        });
    })
    //通过代理的方式为form-add表单绑定submit(因为若是绑定到form-add身上
    // 它有可能还不存在,所以要使用代理)
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault();
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('新增分类失败')
                }
                initArtCateList();
                layer.msg('新增分类成功')
                layer.close(indexAdd);//根据索引关闭弹出层
            }
        })
    })
 <script type="text/html" id="dialog-add">
        <form class="layui-form" id="form-add">
          <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required  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="formDemo">确认添加</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
     </script>

 

标签:function,layer,indexAdd,form,layui,分类,出层,add,小结
From: https://www.cnblogs.com/alwaysrun/p/16609861.html

相关文章

  • 关于layui表格中列的宽度问题怎么修改
    <divclass="layui-card-body"><tableclass="layui-table"><!--这个colgroup就是来控制表格里面每一列的宽度,不加参数就是表明自适应--......
  • npm 报错cb.apply is not a function问题小结
    npm报错cb.applyisnotafunction问题小结 问题描述:   解决方案:方案一运行vue的时候在本级终端运行(这是我解决的方法)方案二去找版本对应问题https://nod......
  • Java数组04:下标越界及小结
    数组的四个基本特点:其长度是确定的。数组一旦被创建,它的大小就是不可以改变的其元素必须是相同类型,不允许出现混合类型;数组中的元素可以是任何数据类型,包括基本类......
  • 关于使用layui加cropper实现裁剪图像
    1.基本使用步骤在<head>中导入cropper.css样式表: <linkrel="stylesheet"href="/assets/lib/cropper/cropper.css"/>在<body>的结束标签之前,按顺序导入如......
  • 关于上传文件的小结(妙!先隐藏,点击了才出来)
    <!--通过accept指定只能选择什么属性的文件--><inputtype="file"id="file"accept="image/png,image/jpg">//隐藏了itype属性为file的input标签,只有点击的时候才......
  • layui面板很重要
    <divclass="layui-card"><divclass="layui-card-header">卡片面板</div><divclass="layui-card-body">卡片式面板面板通常用于非白色背景色的主体内<br>......
  • layui的eletree中的下拉树增加搜索功能
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-sc......
  • 【nodejs】大事件后台管理项目(三)——layui前端布局
    5.文章管理5.1新建ev_articles表CREATETABLE`my_db_01`.`Untitled`(`Id`int(0)NOTNULLAUTO_INCREMENT,`title`varchar(255)NOTNULLCOMMENT'文章......
  • 线段树小结
    线段树线段树二分线段树分治可持久化线段树线段树合并线段树分裂线段树维护单调栈李超线段树势能线段树&吉司机线段树线段树套···都咕掉了。......
  • layui父子间传值
    原文地址:https://www.cnblogs.com/meiqiyuanzi/p/13476296.html子传父值1.html(父页面)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><me......