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');

                    })

                }

            }

        })

    })

}