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": "[email protected]"},
       {"id": 2, "name": "皮特", "age": 24, "mail": "[email protected]"},
       {"id": 3, "name": "卡卡", "age": 20, "mail": "[email protected]"},
       {"id": 4, "name": "戏戏", "age": 26, "mail": "[email protected]"},
       {"id": 5, "name": "一揪", "age": 25, "mail": "[email protected]"}
   ]
}

接下来新建一个页面jtemplates_demo1.html

然后引入jquery,我这里使用的是jquery-2.1.1.min.js，你可以在这里下载http://www.jquery.com/

引入js文件代码如下：

接下来构造模板样式

代码如下：

　　　　　　　　　　<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如下：

此时我们的显示数据的前台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中设置模板和处理数据啦，直接上代码，然后在解释代码的意思，代码如下：

首先我们在前面直接引用了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": "[email protected]"},
               {"id": 2, "name": "皮特", "age": 24, "mail": "[email protected]"},
               {"id": 3, "name": "卡卡", "age": 20, "mail": "[email protected]"},
               {"id": 4, "name": "戏戏", "age": 26, "mail": "[email protected]"},
               {"id": 5, "name": "一揪", "age": 25, "mail": "[email protected]"}
           ]
       };

       // 设置模板
       $("#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>

       
   </div>
</body>
</html>

这里需要注意几点：

1、首先模板样式必须要用<textarea></textarea>标签，否则也可以放入

2、json格式必须是正确的，而且不能用单引号，都是双引号

最终显示效果如下：

jquery jtemplates.js一个很好用的html-json模板工具

猜你喜欢