`

easyTemplate实例

阅读更多

实例一:list简单应用

<!doctype html>
<html>
    <head>
    	<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="lib/easy.template.js" type="text/javascript"></script>	
	</head>
	<body>
		<div id="localSign"></div>
	</body>
	<script id="templateSign" type="text/x-easy-template">
<#macro bjTest data>
	<#list data as list>
		<li>这里是第${list_index+1}列:${list}</li>
	</#list>
</#macro>
	</script>
	<script type="text/javascript">
		var navigationLinkData = [
	       	'one','two','three','four','five','six'
        ];
		var getNavContent = function(data){
			if(!data || !data.length){
				return '';
			}
			var res = easyTemplate($('#templateSign').html(), data).toString();
			console.log(res);
			return res;
		};
		$('#localSign').html(getNavContent(navigationLinkData));
	</script>
</html>

    运行效果:

 

实例二:添加到页面多处的list应用

<!doctype html>
<html>
    <head>
    	<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="lib/easy.template.js" type="text/javascript"></script>	
	</head>
	<body>
		<div class="localSign"></div>
		----------------------------------
		<br>
		bijian
		<br>
		----------------------------------
		<br>
		<div class="localSign"></div>
	</body>
	<script id="templateSign" type="text/x-easy-template">
<#macro bjTest data>
	<#list data as list>
		<li>这里是第${list_index+1}列:${list.code},${list.name}</li>
	</#list>
</#macro>
	</script>
	<script type="text/javascript">
		var navigationLinkData = [
	       	{code:'one',name:'一'},{code:'two',name:'二'},{code:'three',name:'三'},{code:'four',name:'四'},{code:'five',name:'五'},{code:'six',name:'六'}
        ];
		var getNavContent = function(data){
			if(!data || !data.length){
				return '';
			}
			var res = easyTemplate($('#templateSign').html(), data).toString();
			console.log(res);
			return res;
		};
		$('.localSign').html(getNavContent(navigationLinkData));
	</script>
</html>

    运行效果:


 
实例三:表格列数据模块化生成

<!doctype html>
<html>
    <head>
    	<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="lib/easy.template.js" type="text/javascript"></script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>第一栏</td>
				<td>第二栏</td>
				<td>第三栏</td>
				<td>动态一栏</td>
				<td>动态二栏</td>
				<td>动态三栏</td>
			</tr>
			<tr id="localSign0">
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr id="localSign1">
				<td>one</td>
				<td>two</td>
				<td>three</td>
			</tr>
			<tr id="localSign2">
				<td>一</td>
				<td>二</td>
				<td>三</td>
			</tr>
		</table>
	</body>
	<script id="templateSign" type="text/x-easy-template">
		<#macro bjTest data>
			<td>${data.code}</td>
			<td>${data.name}</td>
			<td>${data.age}</td>
		</#macro>
	</script>
	<script type="text/javascript">
		var navigationLinkData = [
	       	{code:'001',name:'张三',age:20},
	       	{code:'002',name:'李四',age:25},
	       	{code:'003',name:'王五',age:30}
        ];
		var getNavContent = function(data){
			if(!data){
				return '';
			}
			var res = easyTemplate($('#templateSign').html(), data).toString();
			console.log(res);
			return res;
		};
		for(var i=0;i<navigationLinkData.length;i++) {
			$('#localSign'+i).append(getNavContent(navigationLinkData[i]));
		}
	</script>
</html>

    运行效果:

 

附:macro标签的作用就是输出模板的前后注释标识

 

  • 大小: 29.6 KB
  • 大小: 53.6 KB
  • 大小: 32.9 KB
  • 大小: 37.4 KB
分享到:
评论

相关推荐

    easyTemplate概述与实例

    NULL 博文链接:https://bijian1013.iteye.com/blog/2034878

    SQL数据库默认实例与命名实例的区别

    ### SQL数据库默认实例与命名实例的区别 在SQL Server中,实例是服务器上SQL Server服务的具体实现。当安装SQL Server时,可以选择安装默认实例或者命名实例。这两种实例类型各有其特点和适用场景,本文将深入探讨...

    Proteus单片机仿真实例源码大全C51单片机Proteus仿真例程学习实例源代码(150例).zip

    Proteus单片机仿真实例源码-32x16汉字.zip Proteus单片机仿真实例源码-44行列键盘.rar Proteus单片机仿真实例源码-44行列键盘.zip Proteus单片机仿真实例源码-485全双工通信.rar Proteus单片机仿真实例源码-485全...

    OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例

    OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例

    Visual C# .NET精彩编程实例集锦

    实例1 如何使用错误提醒控件 实例2 如何使用信息提示控件 实例3 如何使用菜单控件 实例4 如何使用工具栏控件 实例5 如何使用状态栏控件 实例6 如何使用托盘控件 实例7 如何使用标签页控件 实例8 如何使用进度条控件 ...

    sqlserver2008R2应用添加实例步骤

    ### SQL Server 2008 R2 添加实例的详细步骤 #### 一、概述 SQL Server 2008 R2 是一款强大的关系型数据库管理系统,广泛应用于企业级数据管理和处理场景。对于需要在同一台服务器上运行多个独立的SQL Server环境...

    QT5开发及实例配套源代码.zip

    QT5开发及实例配套[源代码] Qt是诺基亚公司的C++可视化开发平台,本书以Qt 5作为平台,每个章节在简单介绍开发环境的基础上,用一个小实例,介绍Qt 5应用程序开发各个方面,然后系统介绍Qt 5应用程序的开发技术,...

    数据结构实例(内含17个详细经典实例)

    数据结构实践教程:内含17个经典数据结构实例 根据五个不同数据结构,对每个结构都有2~4个经典实例。每个实例都有项目简介、设计思路、数据结构、完整程序、运行结果五个部分,可以直接拿来做一篇课程设计。实例名称...

    j2ee实例 j2ee实例j2ee实例

    本实例集合将深入探讨J2EE的核心概念和技术,帮助开发者更好地理解和应用J2EE。 首先,J2EE的核心组件包括Servlet、JavaServer Pages (JSP)、JavaBean、EJB(Enterprise JavaBeans)、JMS(Java Message Service)...

    MCGS高级教程实例模板

    MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板...

    opengl 实例实例实例实例实例

    opengl 实例实例实例实例实例opengl 实例实例实例实例实例

    labview55个经典实例

    下面我们将围绕"LabVIEW 55个经典实例"这一主题,探讨这些实例可能涵盖的知识点,以及它们如何帮助用户提升LabVIEW技能。 1. **基础编程概念**:这55个实例可能会包含基础的编程概念,如循环(For Loop, While Loop...

    C++编程实例100篇

    《C++编程实例100篇》是一本深入浅出的C++编程教程,它以实践为主导,通过丰富的实例帮助学习者掌握C++语言的基础和核心概念。这本书的每个实例都精心设计,旨在帮助初学者和有经验的开发者巩固和提升C++编程技能。 ...

    最新单片机仿真 8255并行口扩展实例

    最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例...

    sakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析.txt

    githubsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析.txtsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析.txtsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析....

    51单片机Proteus仿真实例 闪烁LED

    51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机...

    activiti学习-使用activiti多实例任务实现会签

    ### Activiti多实例任务实现会签功能详解 #### 一、多实例用户任务的基本概念与配置 Activiti是一个开源的工作流引擎,它提供了一种灵活的方式来定义业务流程,并且能够支持复杂的业务逻辑处理。其中,多实例任务...

    【gpio详解及应用实例】gpio详解及应用实例gpio详解及应用实例

    gpiogpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用...

    python 脚本实例 编程实例 入门实例

    本文将深入探讨这些"python 脚本实例 编程实例 入门实例",帮助你理解Python的基本概念和常用操作。 1. **变量与数据类型** Python中的数据类型包括整型(int)、浮点型(float)、字符串(str)和布尔型(bool)...

Global site tag (gtag.js) - Google Analytics