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

2023-11-08实例代码
123

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', {});
 
The End

相关推荐

layui后台布局实例代码
layui后台布局的实例代码,以下是详细代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...
2025-10-15 实例代码
68

可自动切换的tab实例代码
可自动切换的tab实例代码,html代码如下: !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...
2025-09-16 实例代码
114

php数据处理:数组根据某字段进行分组
php数据处理:数组根据某字段进行分组,实例代码如下: /** * @description:根据数据 * @param {dataArr:需要分组的数据;keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...
2025-06-12 实例代码
188

LayUI登录页面页设计实例
实例代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...
2025-04-13 实例代码
234

MUI Picker Input设置默认时间回显实例代码
MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数:'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...
2025-01-09 实例代码
139

input file上传图片设置的实例代码
input file上传图片设置的实例代码 div纯input与type/div input type="file" div指明需要图片/div input type="file" accept='image/*' div指明需要多张图片/div input type="file" multiple accept='image/*' div指明调用摄像头获取图片/div input type="fil...
2024-12-30 实例代码
133