js动态生成添加html

dongtaitianjia.js
$(function() {
	var addKeyAlarmNote = function(){
		var node = "<div id='keyAlarm' class='keyAlarmBox'>"
			+"<span>共有</span>"
			+"</div>";
		$("#box").append($(node));
		$("#gs_container").append($(node).show());
	}
	addKeyAlarmNote();
	
	//将告警拼成html
	
	var getList = function(data){
		var lis ="";
		if(data && data.data.list.length > 0){
			for(var i = 0; i <data.data.list.length;i++){
				console.log("2");
				var li = getAlarmLi(data.data.list[i]);
				lis += li;
			}
		}
		return lis;
	}
	
	$.ajax({url:'MineJs/ajax3.json',
    	type:'post',
    	async:true,
    	success:function(data){
    		var lis = getList(data);
    		$("#keyAlarmContent").append(lis);
    	}});
	
	//获取电站类型对应的图片
	var getStationTypeImg =  function(type){
		if(type == 1){
			return "image/map_point_1X0.png";
		}else if(type = "2"){
			return "image/map_point_220.png";
		}
	}
	
	var getAlarmLi = function(item){
		var node = "<li class='stationsAlarm' sId ='"+item.stationCode+"'>"
		+ "<img src='" + getStationTypeImg(item.cominedType) + "'/>"
		+"<p class = 'descr'>"
		+"<span>[</span>"
		+" <span class='stationType' style='font-weight:800;'>" + (item.cominedType)+"</span>"
		+"<span>]</span>"
		+ "<span class='stationName'>" + item.stationName + "</span>"
        + "<input type='hidden' name='sid' value='" + item.stationCode + "' />"
        + "</p>"
        + "<div class='alarmNums'>"
        + "<div class='alarmLevel levle2' style='border-radius: 5px 0 0 5px;'>" + item.severityLevel['2'] + "</div>"
        + "<div class='alarmLevel levle3'>" + item.severityLevel['3'] + "</div>"
        + "</div>"
		+"</li>";
		return node;
	}
	
	
	
	
});


dongtaitianjia.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="MineJs/dongtaitianjia.js"></script>
 <script type="text/javascript" src="MineJs/ajax.js"></script>
</head>
<body>
<div class="alarm" id="box">
 <span>第一条数据</span>
 <div id="keyAlarmContent" style="height:800px;width:500px">
 </div>
</div>
</body>
</html>

ajax3.json
{"success":true,"message":null,"data":{"list":[{"id":null,"optimisticLockVersion":null,"stationCode":"D5EEAB8D1FD72BC6E70F2FB050DD9EC8","stationName":"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"BE6C528112A8ABF22F12D4DF25F9EBE5","stationName":"hyhy","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"C77CF68F638F06443F8AF1F02DE1B0E3","stationName":"kl","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"DEC0A66791F9943CE286855C78EEDD6A","stationName":"gx","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"73D46007AFD40281125B3AD9E57268D5","stationName":"CSL","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"4C60F42E449C2D3B05ACD3108225AF8E","stationName":"一个很长的狮吼功内容可以显示一些什么内容大家经鉴定该基地及国际景点基金降低基金","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}}],"totalMap":{"1":0,"2":0,"3":0},"total":8,"pageNo":1,"pageSize":6,"pageCount":2},"errorMsg":{}}
js动态生成添加html

猜你喜欢
