layui的弹出框

    

   var layer = layui.layer

    var form = layui.form

 

//实现编辑功能

    //1.点击编辑,弹出弹出层之后请求ajax根据id,填充数据,事件委派

    //2.再通过submit进行事件提交

    $('tbody').on('click', '#btn-edit', function () {

        indexAdd2 = layer.open({

            type: 1,

            area: ['500px', '250px'],

            title: '添加文章分类',

            content: $('#tanAdd2').html()

        });

        var id = $(this).attr('data-id')

        $.ajax({

            method: 'GET',

            url: '/my/article/cates/' + id,

            success: function (res) {

                // console.log(res);

                form.val('form-edit', res.data)

            }

        })

    })

    <!-- 编辑功能的弹出框 -->
    <script type="text/html" id="tanAdd2">
        <form class="layui-form" action="" id="formAdd2" lay-filter="form-edit">
            <!-- 隐藏域 -->
            <input type="hidden" name="Id">
            <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>确认修改</button>
                </div>
            </div>
        </form>
    </script>