template-web.js教程

最新推荐文章于 2020-06-27 19:56:33 发布

鸭蛋小王子

最新推荐文章于 2020-06-27 19:56:33 发布

阅读量7.6k

点赞数

本文链接：https://blog.csdn.net/qq_41750040/article/details/80983939

版权

 <!DOCTYPE html>
    <html lang="en">
    <head>
    	 <meta charset="UTF-8">
    	 <title>template-web.js教程</title>
		 <script src="/web/adminback/Js/jquery.min.js" type="text/javascript"></script>
		 <script src="/web/js/template-web.js" type="text/javascript"></script>  
		 <script src="/web/js/basic.js" type="text/javascript"></script>     	
    </head>
    <body>
	<div class="jsuser_list_wrap">
	<div class="lists">
	<div class="jsuser_list_item" data-id="45415">
		<div class="jsuser_list_top">
			<p style="overflow-y:hidden;border-radius:50%;"></p>
			<div class="bd">
				<div class="bd_top">
					<span class="name">梁某某</span>
					<p class="star_level"><span>星</span>一星家护师</p>
					<p>好评：0分</p>
				</div>
				<div class="bd_btm">
					<span>男</span>
					<span>55岁</span>
					<span>初级技能</span>
					<span>2年护理经验</span>
				</div>
			</div>
		</div>
		<div class="jsuser_list_bottom">
			<p>护理特长</p>
			<div><p>护理普通外科疾病</p></div>
		</div>
	</div>
 </div>
</div>    	
    </body>
    </html>   
    <script id="jsUserListTempl" type="text/html">
    {{each data.list  jsUser i}}
	<div class="jsuser_list_item" data-id="{{jsUser.id}}">
		<div class="jsuser_list_top">
	<p style="overflow-y:hidden;border-radius:50%;"><img lazyLoad="{{jsUser.imageUrl}}"/></p>
			<div class="bd">
				<div class="bd_top">
					<span class="name">{{jsUser.nickName}}</span>
					<p class="star_level"><span>星</span>{{jsUser.stars | starsName}}</p>
					<p>好评：{{if jsUser.averageScore}} 
						    {{jsUser.averageScore}} 
						{{else}}
						      0
						{{/if}}分</p>
				</div>
				<div class="bd_btm">
					<span>{{jsUser.sex | sexName}}</span>
					<span>{{jsUser.birthYear | ageName}}</span>
					<span>{{jsUser.technicalGrade | technicalGradeName}}</span>
					<span>{{jsUser.employmentYear | workageName}}</span>
				</div>
			</div>
		</div>
		<div class="jsuser_list_bottom">
			<p>护理特长</p>
			<div>
				{{if jsUser.specialityIds && jsUser.specialityIds.length>0}}
					{{each jsUser.specialityIds  specialityId i}}
						{{if specialityId | specialityName}}
						   <p>{{specialityId | specialityName}}</p>
						{{/if}}
					{{/each}}
				{{/if}}
			</div>
		</div>
	</div>
{{/each}}
</script>
<script type="text/javascript" >
$(function(){
//向后台发送ajax请求获取json数据
    var $jsuser_list_wrap_lists=$('.jsuser_list_wrap .lists');
         $.ajax({
		type: "get",
		url: "/web/home/index",
		dataType: "json",
		success: function(result) {
	            console.log(result);
		   //通过template,对json数据遍历,把代码[内追加]到div里面
		   $jsuser_list_wrap_lists.append(template('jsUserListTempl', result));
		}
	});

// 注册模板过滤器,就是将数字显示成对应的中文含义
	template.defaults.imports.sexName = function (sex) {
		return sex==1 ? "男" : "女";
	};
	template.defaults.imports.ageName = function (birthYear) {
		if(birthYear){
			return new Date(1530086323374).getFullYear()-$.getDate(birthYear).getFullYear()+"岁";
		}
		return '';
	};
	
	template.defaults.imports.starsName = function (stars) {
		switch (stars) {
		case 1: return "一星家护师";
		case 2: return "二星家护师";
		case 3: return "三星家护师";
		case 4: return "四星家护师";
		case 5: return "五星家护师";
		case 6: return "金牌家护师";
		}
	};
	
	template.defaults.imports.technicalGradeName = function (technicalGrade) {
		switch (technicalGrade) {
		case 3:
			return "高级技能";
		case 2:
			return "中级技能";
		case 1:
			return "初级技能";
		default:
			return "初级技能";
		}
	};
	template.defaults.imports.workageName = function (employmentYear) {
		if(employmentYear){
			return new Date(1530086323374).getFullYear()-$.getDate(employmentYear).getFullYear()+"年护理经验";
		}
		return '';
	};
	var specialityMap = [];
		specialityMap[1] = "护理心血管疾病";
		specialityMap[2] = "护理脑血管疾病";
		specialityMap[3] = "护理呼吸系统疾病";
		specialityMap[4] = "护理消化系统疾病";
		specialityMap[5] = "护理泌尿外科疾病";
		specialityMap[6] = "护理普通外科疾病";
		specialityMap[7] = "护理颅脑外伤疾病的";
		specialityMap[8] = "护理肾脏疾病的";
		specialityMap[9] = "护理肛肠疾病";
		specialityMap[10] = "护理甲状腺疾病";
		specialityMap[11] = "护理乳腺疾病";
		specialityMap[12] = "护理眼部疾病";
		specialityMap[13] = "护理风湿类疾病";
		specialityMap[14] = "护理肿瘤的";
		specialityMap[15] = "照护骨折的";
		specialityMap[16] = "照护老年痴呆的";
		specialityMap[17] = "照护临终";
		specialityMap[18] = "护理瘫痪";
		specialityMap[19] = "糖尿病的生活照护";

	template.defaults.imports.specialityName = function (speciality) {
		return specialityMap[speciality];
	}; 
});
</script>

最终效果图

请求的json数据如下

鸭蛋小王子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
template-web.js教程

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;template-web.js教程&lt;/title&gt; &lt;script src="/web/ad
复制链接

扫一扫