//监听数据表格工具条
        table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                x_content_detail('小说详情','content-detail.html',data,600,500);
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    x_content_delete('/novel/delete',data.novelId);
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){
                x_content_edit('编辑小说','content-edit.html',data,600,500);
            }
        });
 
 
layui弹出层回显代码:
title:弹出层标题
url:弹出层html页面
data:回显数据
w:宽度
h:高度
 
function x_content_edit(title, url, data, w, h) {
    if (title == null || title == '') {
        title = false;
    }
    ;
    if (url == null || url == '') {
        url = "404.html";
    }
    ;
    if (w == null || w == '') {
        w = 800;
    }
    ;
    if (h == null || h == '') {
        h = ($(window).height() - 50);
    }
    ;
    layer.open({
        type: 2,    //iframe层
        area: [w + 'px', h + 'px'],
        fix: false, //不固定
        btn: ['确认', '取消'],//弹出层按钮
        maxmin: true,
        shadeClose: true,
        shade: 0.4,
        title: title,
        offset: '50px',
        content: url,
        success: function (layero, index) {//弹出层打开后的回调函数
            var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
            result = JSON.stringify(data);
            result = $.parseJSON(result);
            $.each(result, function (item) {
                body.find('#A_' + item).val(result[item]);//给弹出层页面赋值,id为对应弹出层表单id
                if (item == 'contentId') {
                    body.find('#B_contentId').val(result[item]);//这里是为动态select赋值,在弹出层创建隐藏元素
                } else if (item == 'type') {
                    body.find('#B_type').val(result[item]);
                } else if (item == 'recommendFlag') {
                    body.find('#B_recommendFlag').val(result[item]);
                }
            });
        },
        yes: function (index, layero) {//点击“确认”按钮后触发的事件
            var data = {};
            var body = layer.getChildFrame('body', index);
            var form = body.find("#novelUpdate").serializeArray();//获取指定id的表单
            $.each(form, function () {
                data[this.name] = this.value;
            });
            data = JSON.stringify(data);
            var content = {'novelJson': data};
            $.post('/novel/update', content, function (rec) {//得到数据提交到后端进行更新
                if (rec.code == 0) {
                    layer.alert(rec.msg, {icon: 6}, function (index) {
                        layer.close(index);
                    });
                    layui.use('table', function () {
                        var table = layui.table;
                        table.reload('contentList', {
                            url: '/novel/novelList' //数据接口,更新成功后刷新数据表格
                        });
                    });
                } else {
                    layer.alert(rec.msg, {icon: 5}, function (index) {
                        layer.close(index);
                    });
                }
                layer.close(index);
            }, 'json');
            return false;
 
        }
    });
}
 
 
从后台读取数据渲染到弹出层的select中,并设置默认选中值:
 
function showNovelType() {
    layui.use('form',function () {
        $ = layui.jquery;
        var form = layui.form;
        $.ajax({
            type:'get',
            url:'/common/getNovelType', //后端接口
            dataType:'json',
            success:function (rec) {
                if(rec['code']==0){
                    var novelType=document.getElementById('A_type');
                    var B_type=document.getElementById('B_type');
                    $.each(rec.data,function(i,item){
                        var option=document.createElement("option"); //创建option标签
                        option.setAttribute("value",item['typeId']);//设置value值
                        if(!B_type) {
                            //要同时判断 null 和 undefined
                        }else {
                            if(item['typeId']==B_type.value) {
                                option.setAttribute("selected",'true');//设置选中状态
                            }
                        }
                        option.innerText=item['typeName'];//显示text内容
                        novelType.appendChild(option);
                        form.render('select');//重新渲染
                    })
                }
            }
        })
    })
}
 
function showRecommendPotion() {
    layui.use('form',function () {
        $ = layui.jquery;
        var form = layui.form;
        $.ajax({
            type:'get',
            url:'/common/getRecommendPosition',
            dataType:'json',
            success:function (rec) {
                if(rec['code']==0){
                    var recommendPotion=document.getElementById('A_recommendFlag');
                    var B_recommendFlag=document.getElementById('B_recommendFlag');
                    $.each(rec.data,function(i,item){
                        var option=document.createElement("option");
                        option.setAttribute("value",item['recommendId']);
                        if(!B_recommendFlag) {
                            //要同时判断 null 和 undefined
                        }else{
                            if(item['recommendId']==B_recommendFlag.value) {
                                option.setAttribute("selected",'true');
                            }
                        }
                        option.innerText=item['recommendName'];
                        recommendPotion.appendChild(option);
                        form.render('select');
                    })
                }
            }
        })
    })
}
 
function showContentProvider() {
    layui.use('form',function () {
        $ = layui.jquery;
        var form = layui.form;
        $.ajax({
            type:'get',
            url:'/contentProvider/getAllProviders',
            dataType:'json',
            success:function (rec) {
                if(rec['code']==0){
                    var A_contentId=document.getElementById('A_contentId');
                    var B_contentId=document.getElementById('B_contentId');
                    $.each(rec.data,function(i,item){
                        var option=document.createElement("option");
                        option.setAttribute("value",item['contentId']);
                        if(!B_contentId) {
                            //要同时判断 null 和 undefined
                        }else{
                            if(item['contentId']==B_contentId.value) {
                                option.setAttribute("selected",'true');
                            }
                        }
                        option.innerText=item['contentName'];
                        A_contentId.appendChild(option);
                        form.render('select');
                    })
                }
            }
        })
    })
}
 

layui在open弹出层回显,解决动态select数据回显问题的更多相关文章

  1. layui如何自定义弹出层关闭事件

    在某些业务场景下,我们需要自定义弹出层关闭事件,代码示例如下: layui.use('layer', function () { var layer = layui.layer; layer.open ...

  2. layui如何隐藏弹出层关闭的按钮

    layui默认弹出层是带有关闭按钮的,但是在某些场景我们不需要layui的关闭按钮,这时只需添加closeBtn :0即可 效果图如下: 示例代码如下: layui.use('layer', func ...

  3. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  4. 微擎使用post提交,并显示弹出层

    微擎使用post提交,并显示弹出层 function changeStatus(id, status) { // 提交数据 var id = parseInt(id); var status = pa ...

  5. layui弹出层处理(获取、操作弹出层数据等)

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

  6. LayUI之弹出层

    1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...

  7. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  8. 弹出层-layui

    type 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) 弹出层 //winIndex存储弹出层的index,以便关闭弹出层时使用 function openWindo ...

  9. layui关闭弹出层

    layui关闭弹出层,今天我在vscode中使用p parent.layer.closeAll()发现没效果 换成layer.closeAll()就解决了这个问题. 由此我觉得关闭layui关闭弹出层 ...

随机推荐

  1. android开发_文本按钮 与 输入框

    1 TextView:    属性与值 android:text="文本" android:textSize="20sp"              //sp为 ...

  2. PowerShell自定义函数定义及调用

    PowerShell是一种命令集,也有自己的语法定义及函数.本文主要介绍如何自定义powershell函数及如何调用,当初在写PowerShell自定义函数的时候查阅了很多资料都没找到如何调用自定义函 ...

  3. windows主用python3 个别程序使用python2的方法

    原始需求: 平时执行命令都默认用python3,遇到个别程序需要python2的时候也能用python2. 实现: 1.先装python3,添加环境变量,这时在cmd里输入python可以显示出是版本 ...

  4. win7 / mysql-8.0.11-winx64 安装的测坑步骤

    虚惊一场,主要问题是 Navicat Premium 连接 mysql8  Client does not support authentication . 1.  下载 官网下载压缩包: mysql ...

  5. H5外包团队:使用HTML5播放短视频代码分享

    滑动代码 /** * 滑动处理 */ function Touch() { this.init(); } Touch.fn = Touch.prototype; Touch.fn.init = fun ...

  6. vim编辑器-多行加注释与去注释

    在使用vim编辑器时,有时候需要对多行代码进行加注释或去注释,下面将介绍两种方法. 方法一:块选择模式 1. 插入注释 (1)首先按键盘上的ESC进入命令行模式 (2)再按Ctrl+V进入VISUAL ...

  7. 【架构设计】Android:配置式金字塔架构

    最近做一个项目,在项目搭建之前,花了些许时间去思考一下如何搭建一个合适的架构.一开始的构思是希望能合理的把应用的各部分进行分离,使其像金字塔一样从上往下,下层为上层提供功能. 在平常项目中,总是有很多 ...

  8. google搜索引擎爬虫爬网站原理

    google搜索引擎爬虫爬网站原理 一.总结 一句话总结:从几个大站开始,然后开始爬,根据页面中的link,不断爬 从几个大站开始,然后开始爬,根据页面中的link,不断加深爬 1.搜索引擎和数据库检 ...

  9. 【转】HDMI之TMDS信号

    转自:https://blog.csdn.net/wangdapao12138/article/details/79935821 HDMI传输原理和DVI相同,由Silicon Image公司发明的T ...

  10. gpu相关

    1.查看cuda版本 cat /usr/local/cuda/version.txt 2.查看cudnn版本 cat /usr/local/cuda/include/cudnn.h | grep CU ...