layui在open弹出层回显,解决动态select数据回显问题

摘要:
//听数据表工具栏表。on('tool(contentList)',function(obj.event){//注意:tool是工具栏事件名称,test是表原始容器的属性lay filter=“相应值”vardata=obj.data//获取当前行数据,layEvent=obj.event;//获取与lay事件对应的值if(layEvent=='detail'){x_content_
//监听数据表格工具条
        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数据回显问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇pl/sql下DBMS_OUTPUT.PUT_LINE的输出位置二维vector的使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

利用sys.sysprocesses检查SqlServer的阻塞和死锁

Sys.SysProcesses 系统表是一个很重要的系统视图,主要用来定位与解决Sql Server的阻塞和死锁 视图中主要的字段: 1. Spid:Sql Servr 会话ID 2. Kpid:Windows 线程ID 3. Blocked:正在阻塞求情的会话 ID。如果此列为 Null,则标识请求未被阻塞 4. Waittype:当前连接的等待资源编...

两台centos之间传送文件

最近在CentOS系统中(主机A)读数据。由于A主机只是作为数据读取,具体的Deep Learning 实验,需要在主机B( CentOS )中进行,需要将主机A上的数据传输。由于主机A并不是一直开着CentOS系统,且数据量比较(40G+),所以用优盘copy的方法有点不现实,经过查找资料,发现了两种方法。 注意:两台主机都是CentOS 6.5 版本的...

Oracle数据库4--多表关联

1. 92语法多表关联 1.1笛卡尔积 --笛卡尔积 select * from emp,dept 1.2等值连接 --等值连接--需求:查询雇员的部门名称 selecte.ename,e.deptno,d.dname fromemp e,dept d where e.deptno = d.deptno 1.3不等值连接 --不等值连接--查询每个雇员的...

vue中的watch监听数据变化以及watch中各属性详解

1、watch使用的几种方法(1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值 watch: { data(val, newval) { console.log(val) console.log(newval) } } (2)通过watch监听docData数据的变化...

el-upload配合vue-cropper实现上传图片前裁剪

需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像。 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数。 裁剪一开始找的 cropper 看着功能到是非常齐全,api也比较丰富,基本是符合预期的需求的。但是此库是基于jq 的,在vue项目中有点难用。于是就找到了 v...

MYSQL 批量删除以特定前缀开头的表

前言 这是工作中确实会用到,比如分库分表后有t_order_01、t_order_02、t_order_03...t_order_08 这样的表。 测试过程中造了大量数据进行测试,其中可能含有部分脏数据,因此下一轮测试时最好把整个模块的数据进行删除。...