jquery jtemplates.js一个很好用的html-json模板工具
转载:https://blog.csdn.net/chenhongwu666/article/details/51798476
jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据时发愁了。后端语言使用php,asp.net,jsp等都不是问题,使用模板渲染可以很大程度上提高程序性能,使用异步获取数据,不用整个页面都回发,好处当然不仅仅是这些。
下载jtemplates,官网的文档写得非常的详细
打开官网:http://jtemplates.tpython.com/ (不知什么原因,现在不能打开了)
左侧找到Download,然后直接点击要下载的文件即可,当前最新版本是0.8.4
jTemplates配合jQuery的on或者delegate事件处理方法可以让你迷恋无法自拔。哈哈...
下面是详细用法总结:
jtemplates模板的简单使用,首先使用jtemplates就要使用json数据,在这里我们不妨构造一个json格式的数据,如下:
{
"name" : "网马伦",
"list_id" : 89757,
"table":[
{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
]
}
接下来新建一个页面jtemplates_demo1.html
然后引入jquery,我这里使用的是jquery-2.1.1.min.js,你可以在这里下载http://www.jquery.com/
引入js文件代码如下:
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
接下来构造模板样式
代码如下:
<textarea id="template" class="template">
<div><strong>部门编号:{$T.list_id}</strong></div>
<div><strong>负责人:{$T.name} </strong></div>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</div>
</textarea>
这个是我要最终显示的效果,也就是模板,然后模板定义好了,然后我们在定义一个最后用来承载显示数据的标签,一般用div或者其他标签均可,我这里使用div如下:
<div id="result"></div>
此时我们的显示数据的前台HTML标签就写好了,模板和result这两个的顺序没有要求,但是为了阅读方便这里使用如下顺序放置:
<div id="result"></div>
<textarea id="template" class="template">
<div><strong>部门编号:{$T.list_id}</strong></div>
<div><strong>负责人:{$T.name} </strong></div>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</div>
</textarea>
接下来就要在js中设置模板和处理数据啦,直接上代码,然后在解释代码的意思,代码如下:
<script type="text/javascript">
$(function(){
// 初始化JSON数据
var data = {
"name" : "网马伦",
"list_id" : 89757,
"table":[
{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
]
};
// 设置模板
$("#result").setTemplateElement("template");
// 给模板加载数据
$("#result").processTemplate(data);
});
</script>
首先我们在前面直接引用了jQuery,在这里直接写在$(function(){});里面就可以了,
$("#result").setTemplateElement("template");这一步非常关键,解释如下:
这一步的意思就是讲id="result"的div设置模板为id="template",然后就是处理数据,这里的data就是json数据,这样就可以直接显示json数据了,这就是模板渲染,简单吧,下面是全部代码如下:
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - jTemplates</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
<style type="text/css">
.container{
width: 1000px;
height: 600px;
margin: 0 auto;
}
.template{
display: none;
}
table{
background-color: #fff;
}
table tr th{
padding: 8px;
border-bottom: 1px solid #eee;
}
table tr td{
padding: 10px;
border-bottom: 1px solid #eee;
}
</style>
<script type="text/javascript">
$(function(){
// 初始化JSON数据
var data = {
"name" : "网马伦",
"list_id" : 89757,
"table":[
{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com"},
{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com"},
{"id": 3, "name": "卡卡", "age": 20, "mail": "112233@domain.com"},
{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com"},
{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com"}
]
};
// 设置模板
$("#result").setTemplateElement("template");
// 给模板加载数据
$("#result").processTemplate(data);
});
</script>
</head>
<body>
<div class="container">
<div><h1>标题</h1></div>
<div id="result"></div>
<textarea id="template" class="template">
<div><strong>部门编号:{$T.list_id}</strong></div>
<div><strong>负责人:{$T.name} </strong></div>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</div>
</textarea>
<!-- <textarea id="templateContainer" style="display: none;">
<table>
<tr>
<td>Id</td>
<td>标题</td>
<td>发布时间</td>
</tr>
{#foreach $T.Lists as row}
<tr>
<td>{$T.row.Id}</td>
<td>{$T.row.Title}</td>
<td>{$T.row.CreateDate}</td>
</tr>
{#/for}
</table>
</textarea> -->
</div>
</body>
</html>
这里需要注意几点:
1、首先模板样式必须要用<textarea></textarea>标签,否则也可以放入
<script id="template">
<div><strong>部门编号:{$T.list_id}</strong></div>
<div><strong>负责人:{$T.name} </strong></div>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</div>
</script>
中,都是可以的
2、json格式必须是正确的,而且不能用单引号,都是双引号
最终显示效果如下:
jquery jtemplates.js一个很好用的html-json模板工具相关推荐
- Hider 2 for Mac 一个很好用的文件隐藏加密工具
Hider 2 for Mac 一个很好用的文件隐藏加密工具 前沿 有很多人电脑上都有很多私密文件,不方便给别人看到,那该怎么办呢,又不能删除. 这时就是Hider 2 的作用了,能把文件很好的隐藏起 ...
- 一个很好用的静态代码扫描工具 360FireLine
一个很好用的静态代码扫描工具 360FireLine 静态代码扫描工具有很多,Android Studio 自带的Lint,FindBugs,前两者生成的测试结果报告都是英文版的,对于英文不好的童鞋们 ...
- jquery.countdown.js一个时间倒计时的插件
1 http://hilios.github.io/jQuery.countdown/ 到官网上下载插件 2 <div id="getting-started">< ...
- 一个很好用的vue表单工具,快速进行表单开发
一个很好用的vue表单插件,已拖动的形式,快速的构建表单,可以对表单数据设置,是否必填,校验等操作,设置完成后,可以选择表单已哪种方式呈现(页面 or 弹窗) 插件地址: https://mrhj.g ...
- 突然发现一个很好用Golang的json库
2019独角兽企业重金招聘Python工程师标准>>> json 我并不想解释json是什么. 库名 GJSON 点这里去star感谢小哥 下载 $ go get -u github ...
- 知云文献翻译打不开_推荐一个很好用的阅读英文文献工具(研究僧看过来啦!!!)...
刚刚研一的小伙伴是不是看到整篇的英文文献十分苦恼... 科研小白表示完全看不懂英文论文啊,就算看完了再回忆回忆脑袋怎么是一片空白..金鱼的记忆. 我这六级的水平(更可能是四级的水平)怎么才能看懂这动不 ...
- 《Linux运维总结:sshpass一个很棒的免交互SSH登录工具》
文章目录 一.sshpass介绍 二.sshpass安装 三.sshpass使用 四.sshpass实例 总结:整理不易,如果对你有帮助,可否点赞关注一下? 一.sshpass介绍 ssh登陆不能在命 ...
- Linux脚本免交互,系统运维|sshpass:一个很棒的免交互 SSH 登录工具,但不要用在生产服务器上...
在大多数情况下,Linux 系统管理员使用 SSH 登录到程 Linux 服务器时,要么是通过密码,要么是无密码 SSH 登录或基于密钥的 SSH 身份验证. 如果你想自动在 SSH 登录提示符中提供 ...
- 推荐一个很棒的免费自助建站工具:Tap
Tap简介 Tap(www.tap.cn)是一个新型的免费自助建站服务平台,易用.专业.高效的Tap能让您轻松摆脱建站过程中技术对创造力的制约.拥有极高自由度的Tap能够快速提升您的建站热情.Tap为 ...
最新文章
- [转]数据库性能优化(老Key)
- javascript 对象方法、类方法、原型方法
- jdbc Template 介绍和 spring 链接数据源的四种方式
- spring 配置只读事务_只读副本和Spring Data第3部分:配置两个实体管理器
- 调用百度 Echarts 显示重庆市地图
- 淘宝山寨IOS sdk
- Python面试题之“猴子补丁”(monkey patching)指的是什么?这种做法好吗?
- WIN和LIN环境下对拍程序
- 如何判断当前循环的栏目是不是最后一个
- C语言编写万年历程序
- Oracle 创建新用户后无法登入,显示user lacks CREATE SESSION privilege; logon denied
- 远程无人值守批量装机(图文详解)
- mysql innodb 缓冲池_mysql8 参考手册--配置多个InnoDB缓冲池实例
- apollo学习之---基础知识点学习(1)commen_math
- 扩展欧几里得定理求ax + by = c 的通解
- 无意中看到,有一些感受。。。
- 在linux上用SDKMan对Java进行多版本管理
- 为什么 Google 总是在不断地关闭产品呢?
- 用java创建person类_java编程问题创建person类
- java虚拟机堆和栈用途_Jvm虚拟机学习
热门文章
- 刷新iframe页面 allowtransparency 属性
- 2018OKR年中回顾
- [深度学习]动手学深度学习笔记-3
- 财会法规与职业道德【17】
- AssertValid函数学习 .
- pkill mysql_终止进程的工具kill,killall和pkill
- qca9535 tftp32 刷机_tp路由器升级_tftpd32刷路由器救砖
- Iterm2 设置快捷键 Home End 行首 行尾 上个单词 下个单词
- java版小易准备去魔法王国采购魔法神器
- gvim c语言,gvim+tdm-gcc设置c语言编译环境