zoukankan      html  css  js  c++  java
  • layui在open弹出层回显,解决动态select数据回显问题

    //监听数据表格工具条
            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');
                        })
                    }
                }
            })
        })
    }
     
  • 相关阅读:
    系统调用与库函数
    在树莓派上 搭建sqlite数据库
    (转)inux Read系统调用
    查看当前日期是这一年的第几天
    求解某个范围内的全部完数
    求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。
    输入三个整数x,y,z,请把这三个数据由大到小输出。
    模仿ArrayList底层实现
    可视化日历
    Oracle之约束条件1:主键约束
  • 原文地址:https://www.cnblogs.com/dingxu/p/9594295.html
Copyright © 2011-2022 走看看