layer.open获取数据以及回显实例代码-前端实例代码

list页面配置 // 行事件绑定 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === "edit") { //eg2 layer.open({ title: '修改分类' , type: 2 , btn: ['提交'] , content: 'edit.html' , area: ['720px', '680px'] , shadeClose: false , move: false , scrol

list页面配置

// 行事件绑定
 table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === "edit") {
                //eg2
                layer.open({
                    title: '修改分类'
                    , type: 2
                    , btn: ['提交']
                    , content: 'edit.html'
                    , area: ['720px', '680px']
                    , shadeClose: false
                    , move: false
                    , scrollbar: false
                    , success: function (layero, index) {
                        // 数据回显
                        var body = layer.getChildFrame('body', index);
                        body.find('input[name="title"]').val(data.title);
                        body.find('input[name="sort"]').val(data.sort);
                        body.find('input[name="imgUrl"]').val(data.imgUrl);
                        body.find('textarea[name="remark"]').val(data.remark);
                        body.find('select[name="stated"]').val(data.stated);
                        body.find('select[name="pageCode"]').val(data.pageCode);
                        body.find('input[name="outUrl"]').val(data.outUrl);
                        body.find('img[id="demo1"]').attr("src",imgUrl+data.imgUrl);
                    }
                    , yes: function (index, layero) {
                        // 点击确定后获取弹窗数据
                        var body = layer.getChildFrame('body', index);
                        let title = body.find('input[name="title"]')[0].value;
                        let sort = body.find('input[name="sort"]')[0].value;
                        let imgUrl = body.find('input[name="imgUrl"]')[0].value;
                        let remark = body.find('textarea[name="remark"]')[0].value;
                        let stated = body.find('select[name="stated"]')[0].value;
                        let pageCode = body.find('select[name="pageCode"]')[0].value;
                        let outUrl = body.find('input[name="outUrl"]')[0].value;
                        if (title.length < 1) {
                            layer.msg("请输入轮播图名称");
                            return false;
                        }
                        if (imgUrl.length < 8) {
                            layer.msg("请上传图片");
                            return false;
                        }
                        if (imgUrl.length < 8) {
                            layer.msg("请上传图片");
                            return false;
                        }
                        $.ajax({
                            url: url + "/sys/b/update"
                            , type: "post"
                            , data: {
                                token: localStorage.getItem("token"),
                                id: data.id,
                                title: title,
                                sort: sort,
                                imgUrl: imgUrl,
                                stated: stated,
                                pageCode: pageCode,
                                outUrl: outUrl,
                                remark: remark
                            },
                            success: function (res) {
                                layer.msg(res.message, {time: 1500}, function () {
                                    if (res.code == "200") {
                                        layer.closeAll();
                                        window.location.reload();
                                    } else if (res.code == "201") {
                                        window.location = "../login.html";
                                    }
                                })
                            }
                        })
                    },
                    cancel: function () {
                        //右上角关闭回调
                        layer.msg("已取消",{time:1500},function () {
                            layer.closeAll();
                        });
                    }
                });
            } else if (obj.event === "del") {
                layer.confirm("确定删除么？", {
                    btn: ["确定", "取消"]
                }, function () {
                    $.ajax({
                        url:url+"/sys/b/del",
                        type:"post",
                        data:{
                            token:localStorage.getItem("token"),
                            id:data.id
                        },
                        success:function (res) {
                            layer.msg(res.message, {time: 1500}, function () {
                                if (res.code == "200") {
                                    layer.closeAll();
                                    window.location.reload();
                                } else if (res.code == "201") {
                                    window.location = "../login.html";
                                }
                            })
                        }
                    })
                })
            }
        })

弹框数据

<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" value="" placeholder="标题" maxlength="10"
                   autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="number" name="sort" value="0" placeholder="排序" maxlength="10"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">位置</label>
        <div class="layui-input-inline">
            <select name="pageCode" lay-filter="page_code" id="page_code">
                <option value="HOME_PAGE">首页</option>
            </select>
        </div>
        <label class="layui-form-label">展示/隐藏</label>
        <div class="layui-input-inline">
            <select name="stated" lay-filter="stated" id="stated">
                <option value="1">展示</option>
                <option value="0">隐藏</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">链接</label>
        <div class="layui-input-inline">
            <input type="text" name="outUrl" value="" placeholder="请输入链接" maxlength="10"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 200px;height: 175px;margin-top: 8px">
                    <input type="hidden" name="imgUrl" id="imgUrl">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <textarea placeholder="请输入内容最多150个字符" maxlength="150" style="width: 350px;height: 180px;resize: none" name="remark" class="layui-textarea"></textarea>
        </div>
    </div>
</form>
<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/jquery/dist/jquery.js" charset="utf-8"></script>
<script src="../../js/common.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    // 加载需要的组件如：上传、日期等
    //常规使用 - 普通图片上传
    layui.use(['upload','form'], function () {
        var upload = layui.upload;
        var form = layui.form;
        form.render();
        upload.render({
            elem: '#test1'
            , size: 1024 * 1204
            , exts: 'png|jpg|jpeg' //只允许上传压缩文件
            , url: url + '/upload?token=' + localStorage.getItem("token") //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                layer.msg(res.message, {time: 1500}, function () {
                    $("#imgUrl").val(res.data);
                })
            }
        });
    });
 
</script>

如果需要对编辑器进行数据回显：一定要在build之前进行赋值

 var detailHtml = localStorage.getItem("detailHtml");
  $("#detail_area").val(detailHtml);
  let index= layedit.build('detail_area', {});

基础教程推荐