关于将Layui的模板引擎放入到弹框中,弹出!

    没有采用jq的封装,所以看起来有点不优雅,实现后的效果:

关于将Layui的模板引擎放入到弹框中,弹出!_第1张图片

第一步,把下面代码放入到HTML的末尾




	

第二步,引入JS方法,//弹出框 _title抬头标题,_area_arr弹出框宽高数组,_id唯一性,_mb是模板的ID(这个地方传ID不要给双引号),listdata是从后台取过来的数据,安装自己的需要重新组合了一下。

function xq(_title,_area_arr,_id,_mb,listdata){
		//弹出框
	    	layer.open({
	    		  type: 1,
	    		  title:_title,
	    		  area: _area_arr, //宽高['620px', '285px']
	    		  content:$("#"+_id)
	    		});
	    	
		    	//获取模板
		    	var getTpl = _mb.innerHTML
	    	
			  layui.use('laytpl', function(){
			    		  var laytpl = layui.laytpl; 

			  	    //渲染模板  
			    	laytpl(getTpl).render(listdata, function(html){
			    		document.getElementById(_id).innerHTML = html;
			    	});
		
			  });	  
		  
	  }

第三步,引入JS

//重组数据
var listdata = {"list":[{"namex":"用户账号","valuex":data.yhdh,"namey":"姓名","valuey":data.xm},{"namex":"上次登录时间","valuex":dateFormat(data.scdlsj),"namey":"上次登录IP","valuey":data.scdlip},{"namex":"部门名称","valuex":data.bmmc,"namey":"角色","valuey":data.rname},{"namex":"状态","valuex":dazt(),"namey":"","valuey":""}]
}
    	
  xq("详情",['620px','235px'],"tablexs",tablexs_text,listdata);


你可能感兴趣的:(关于将Layui的模板引擎放入到弹框中,弹出!)