jquery-jtemplates.js下载地址：https://gitee.com/nelsonlei/jquery-jtemplates.jsMoBanYingYong

　　

 <!DOCTYPE html>

 <html>

 <head lang="en">

   <meta charset="UTF-8">

   <title></title>

   <script type="text/javascript" src="jquery.min.js"></script>

   <script type="text/javascript" src="jquery-jtemplates.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>

 </head>

 <body>

 <div class="container">

   <!--内容展示区-->

   <div id="result"></div>

   <!--渲染处理区，textarea为必须元素，display：none-->

   <textarea id="template" class="template">

       <div>部门编号：{$T.list_id}</div>

       <div>部门负责人：{$T.name}</div>

      <div>

        <table>

          <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>邮箱</th>

            <th>性别</th>

          </tr>

          <!--渲染的关键句，类似于for循环-->

          {#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>

            <td>{$T.record.sex}</td>

          </tr>

          {#/for}

          <!--渲染的关键句，类似于for循环-->

        </table>

      </div>

   </textarea>

   <div style="width: 100%;margin: 4rem 0;">------------上面是多维数组，下面是单维数组----------</div>

   <div id="result1"></div>

   <textarea id="template1" class="template">

      <div>

        <table>

          <tr>

            <th class="Number">编号</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>邮箱</th>

            <th>性别</th>

          </tr>

          <!--渲染的关键句，类似于for循环-->

          {#foreach $T as record}

          <tr>

            <td>{$T.record.id}</td>

            <td>{$T.record.name}</td>

            <td>{$T.record.age}</td>

            <td>{$T.record.mail}</td>

            <td>{$T.record.sex}</td>

          </tr>

          {#/for}

          <!--渲染的关键句，类似于for循环-->

        </table>

      </div>

   </textarea>

 </div>

 <script>

   var data = {

     "name": "网马伦",

     "list_id": 89757,

     "table": [

       {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com","sex":"man"},

       {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com","sex":"man"},

       {"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"}

     ]

   };

   $("#result").setTemplateElement("template");

   $("#result").processTemplate(data);

   var table=[

     {"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"},

     {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com","sex":"man"},

     {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com","sex":"man"}

   ]

   $("#result1").setTemplateElement("template1");

   $("#result1").processTemplate(table);

 </script>

 </body>

 </html>

　　效果如下：

　　

jquery-jtemplates.js模板应用的更多相关文章

  1. jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第二篇

    jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...

  3. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  4. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  5. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  6. jquery的一个模板引擎-zt

    jQuery-jTemplate.js下载:http://jtemplates.tpython.com/ 一 , 简单介绍 它是一个基于jQuery开发的javascript模板引擎.它主要的作用如下 ...

  7. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  8. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  9. jquery.validate.js在IE8下报错不运行

    因为项目要表单验证,所以特意去找了jquery.validate这个应该是jquery官方团队出品的表单验证插件. 实际应用时,却在IE8调试时碰到了问题. 从jquery.validate官网下载了 ...

  10. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

随机推荐

  1. odoo开发笔记-自定义发送邮件模板

    1. 首先激活开发者模式 2. 点击设置 - Email - 模板 - “选择你需要修改的模板” 我们以销售模块-报价单 邮件模板为例 来说明. quote order 原先默认模板,发出的邮件显示效 ...

  2. Python：Windows8下安装BeautifulSoup

    运行环境:Windows 8.1 Python:2.7.6 在安装的时候,我使用的pip来进行安装,命令如下: pip install beautifulsoup4 运行的时候,报错如下: Excep ...

  3. 【Canal源码分析】client工作过程

    client的工作过程,需要我们自己去编写对应的逻辑,我们目前只能从example写的例子来看.目前examle中提供了两个例子,一个是单机的,一个是集群的cluster,我们后续如果需要进行开发的话 ...

  4. 工具-CrashMonkey4IOS，Monkey测试方案

    在TesterHome看到了CrashMonkey4IOS,顿时觉得之前用instrument在做monkey测试,非常的弱智!crash后啥都看不到,无crashlog,无crash步骤,并且也不能 ...

  5. C#基础篇三流程控制2

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P01R ...

  6. linux下md5sum用法 (查看文件或字符串的md5值)

    MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改.MD5 全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生一个二进制长 ...

  7. Python常见问题

    1. 处理中文时出现的错误'ascii' codec can't decode byte 0xe9 in position 0: ordinal not in range(128)" 解决方 ...

  8. [转]腾讯云Linux云服务器文件上传利器——WinSCP

    本文转自:http://bbs.qcloud.com/thread-4379-1-1.html WinSCP简介 WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持S ...

  9. WPF命令（Command）介绍、命令和数据绑定集成应用

    要开始使用命令,必须做三件事: 一:定义一个命令 二:定义命令的实现 三:为命令创建一个触发器 WPF中命令系统的基础是一个相对简单的ICommand的接口,代码如下: public interfac ...

  10. ionic 混合应用开发

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...