动态生成layer.open弹出层详细使用案例

很多页面会使用到弹出层，动态生成，我结合自己的使用来讲个案例吧

具体展现的页面如下

这个是个审核查询页面，会动态生成数据，单击id后会出现一个弹窗

这是弹窗页面

下面是代码

单击的代码

<li style="width: 90px;"><button type="button" class="btn_search" οnclick="shsearch()">查询</button></li>

function的代码，记得单击事件的danji(this)一定要加上this不然后面的会取不到id值，因为id是动态生成的，无法用getbyid去取，最后append的话拼接到id为sh的tbody标签上

function shsearch() {
    	$("#sh").empty();
        	    var bixuan = document.getElementById("bixuan").value;
	            var acceptance_group = document.getElementById("j1").value;
	            var handle_person = document.getElementById("j2").value;
	            var operator_person = document.getElementById("operator_person").value;
	            $.ajax({
	                url: "/event/findExamineEveN.do",
	                type: "post",
	                dataType: "json",
	                async:false,  
	                data: {
	                    "acceptance_group": acceptance_group,
	                    "handle_person": handle_person,    
	                    "operator_person": operator_person
	                },
	                success: function (result) { 
	                    var data = result.data;
	                    for (var i = 0; i < data.length; i++) {
	                        var id = data[i].eventId;
	                        var trs = '';
	                        trs += '<tr>';
	                        trs += '<td><a id="'+data[i].eventId+'" href="#" class="gys_xinxi" οnclick="danji(this)">'+data[i].eventId+'</a></td>' ; //
	                        trs += '<td>' + data[i].title + '</td>';
	                        trs += '<td>' + data[i].event_type + '</td>'; //
	                        trs += '<td>' + data[i].submit_time + '</td>'; //
	                        trs += '<td>' + data[i].accept_group + '</td>';
	                        trs += '<td>' + data[i].operator_person + '</td>';
	                        trs += '<td>' + data[i].state + '</td>';
	                        trs +=  '<td><a type="button" class="btn btn-info Order_form"href="询价订单详细.html" title="询价订单详细">不通过</a> <a type="button"class="btn btn-warning cx_Inquiry">通过</a></td>';
	                        trs += '</tr>';
	                        $("#sh").append(trs);
	                    }
	                  }

然后是页面一个简单的弹出层弹出页面的框体代码，这个div是用来给append定位的，因为你拼接的弹出层得有个具体页面，一定要放在页面的最后面，而且要是none不显示的

<div class="" id="Supplier_Info" style="display: none"></div>

最后就是弹出层的代码了

function danji(obj){
		var id=$(obj).attr("id");
		 $.ajax({
	            url: "/event/findExamineEveN.do",
	            type: "post",
	            dataType: "json",
	            data: {
	            	"eventId":id
	            },
	            success: function (result) { 
	                 var data = result.data;
	                    var trs='';
	                     trs += '<div class="page-content">';
	                     trs += '<div class="supplier_style">';
	                     trs += '<div class="info_Content">';
	                     trs += '<ul class="Content_list clearfix">';
	                     trs += '<li><label class="label_name">ID</label><span>'+data[0].eventId+'</span></li>';
	                     trs += '<li><label class="label_name">用户姓名</label><span>'+data[0].customer_name+'</span></li>';
	                     trs += '<li><label class="label_name">用户部门</label><span>'+data[0].customer_depar+'</span></li>';
	                     trs += '<li><label class="label_name">用户电话</label><span>'+data[0].customer_tel+'</span></li>';
	                     trs += '<li><label class="label_name">用户职位</label><span>'+data[0].customer_position+'</span></li>';
	                     trs += '<li><label class="label_name">办公地址</label><span>'+data[0].customer_place+'</span></li>';
	                     trs += '<li><label class="label_name">标题</label><span>'+data[0].title+'</span></li>';
	                     trs += '<li><label class="label_name">详细描述</label><span>'+data[0].detailed_description+'</span></li>';
	                     trs += '<li><label class="label_name">事件来源</label><span>'+data[0].event_source+'</span></li>';
	                     trs += '<li><label class="label_name">事件类型</label><span>'+data[0].event_type+'</span></li>';
	                     trs += '<li><label class="label_name">事件分类层1</label><span>'+data[0].event_layer1+'</span></li>';
	                     trs += '<li><label class="label_name">事件分类层2</label><span>'+data[0].event_layer2+'</span></li>';
	                     trs += '<li><label class="label_name">事件分类层3</label><span>'+data[0].event_layer3+'</span></li>';
	                     trs += '<li><label class="label_name">严重程度</label><span>'+data[0].severity+'</span></li>';
	                     trs += '<li><label class="label_name">服务对象</label><span>'+data[0].service_object+'</span></li>';
	                     trs += '<li><label class="label_name">优先级</label><span>'+data[0].priority+'</span></li>';
	                     trs += '<li><label class="label_name">接受组</label><span>'+data[0].accept_group+'</span></li>';
	                     trs += '<li><label class="label_name">处理人</label><span>'+data[0].handle_person+'</span></li>';
	                     trs += '<li><label class="label_name">状态</label><span>'+data[0].state+'</span></li>';
	                     trs += '<li><label class="label_name">状态理由</label><span>'+data[0].status_reasons+'</span></li>';
	                     trs += '<li><label class="label_name">事件根源</label><span>'+data[0].event_root+'</span></li>';	    
	                     trs += '<li><label class="label_name">解决方案</label><span>'+data[0].solution+'</span></li>';
	                 	 trs += '</ul>';
	                 	 trs += '</div>';
	                 	 trs += '</div>';
	                 	 trs += '</div>';
	                	 $("#Supplier_Info").append(trs);
	                	 layer.open({
	                     type: 1,
	                     title: '详细信息',
	                     maxmin: true,
	                     shadeClose: true, //点击遮罩关闭层
	                     area : ['600px' , '800px'],
	                     content: $('#Supplier_Info')
	                 });
	            },
	            error: function () {
	                alert("无数据");
	            }
	        });
	}

layer.open的type一定要是1，而且content选择的是呢个div的id，这样就可以弹出一个动态生成的弹出层了

其实还可以使用freemarker的方法去生成页面，我只是举了我自己日常中的例子

本人一直是做后端的，可能实现前端功能的时候并不是最简单的方法，不过只要是能实现就好了