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

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

具体展现的页面如下

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

这是弹窗页面

下面是代码

单击的代码

查询

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 += '';
	                        trs += ''+data[i].eventId+'' ; //
	                        trs += '' + data[i].title + '';
	                        trs += '' + data[i].event_type + ''; //
	                        trs += '' + data[i].submit_time + ''; //
	                        trs += '' + data[i].accept_group + '';
	                        trs += '' + data[i].operator_person + '';
	                        trs += '' + data[i].state + '';
	                        trs +=  '不通过 通过';
	                        trs += '';
	                        $("#sh").append(trs);
	                    }
	                  }

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

最后就是弹出层的代码了

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 += '
';
	                     trs += '
';
	                     trs += '
';
	                     trs += '
';
	                     trs += '
ID'+data[0].eventId+'
';
	                     trs += '
用户姓名'+data[0].customer_name+'
';
	                     trs += '
用户部门'+data[0].customer_depar+'
';
	                     trs += '
用户电话'+data[0].customer_tel+'
';
	                     trs += '
用户职位'+data[0].customer_position+'
';
	                     trs += '
办公地址'+data[0].customer_place+'
';
	                     trs += '
标题'+data[0].title+'
';
	                     trs += '
详细描述'+data[0].detailed_description+'
';
	                     trs += '
事件来源'+data[0].event_source+'
';
	                     trs += '
事件类型'+data[0].event_type+'
';
	                     trs += '
事件分类层1'+data[0].event_layer1+'
';
	                     trs += '
事件分类层2'+data[0].event_layer2+'
';
	                     trs += '
事件分类层3'+data[0].event_layer3+'
';
	                     trs += '
严重程度'+data[0].severity+'
';
	                     trs += '
服务对象'+data[0].service_object+'
';
	                     trs += '
优先级'+data[0].priority+'
';
	                     trs += '
接受组'+data[0].accept_group+'
';
	                     trs += '
处理人'+data[0].handle_person+'
';
	                     trs += '
状态'+data[0].state+'
';
	                     trs += '
状态理由'+data[0].status_reasons+'
';
	                     trs += '
事件根源'+data[0].event_root+'
';	    
	                     trs += '
解决方案'+data[0].solution+'
';
	                 	 trs += '
';
	                 	 trs += '
';
	                 	 trs += '
';
	                 	 trs += '
';
	                	 $("#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的方法去生成页面，我只是举了我自己日常中的例子

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