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. windows系统numpy的下载与安装教程

    numpy是一款基于python的功能强大的科学计算包.要安装numpy首先你得先安装python.python的安装非常简单,本人安装的是python3.4. 工具/原料 安装好的python程序 ...

  2. CentOS安装与配置Powerline插件

    Powerline powerline 可用于美化终端和vim编辑器的插件,它是Python开发的,为多个应用(bash,zsh,tmux等)提供statusline. 下面我们在CentOS上为vi ...

  3. vector源码(参考STL源码--侯捷):空间分配导致迭代器失效

    vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷) vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 vector源码3(参考STL源 ...

  4. Python -----issubclass和isinstance

    issubclass用于判断一个类是否为另一个类的子类,isinstance用于判断一个对象是否某类的一个实例 import math class Point: def __init__(self, ...

  5. 全网最详细的Oracle10g/11g的官方下载地址集合【可直接迅雷下载安装】（图文详解）

    不多说,直接上干货! 方便自己,也方便他人查阅. Oracle 11g的官网下载地址:  http://www.oracle.com/technetwork/database/enterprise-e ...

  6. 测试JavaScript数组Array

    <script> var numbers = [1, 2, 3, 4, 5]; function isLessThan3(value,index,array) { var returnVa ...

  7. java遍历http请求request的所有参数实现方法

    方法一: 通过程序遍历http请求的所有参数放到hashmap中,用的时候方便了. 如果参数值有中文,那么需要在程序中添加filter转码,或者在下面程序里,对paramValue转码 Map map ...

  8. eclipse安装quick text search插件，全文搜索

    主要有两种方法 1.InstaSearch 同样可以做到workspace下的全文搜索 可以使用eclipse marktplace中搜索instaSearch,与普通软件安装类似 安装成功后的界面如 ...

  9. 设置ul水平居中

    <div class="jdcg-menu-nav"> <ul> <li>基本信息</li> <li>阶段资料</ ...

  10. unity 中Canvas MatchHeight

    设置了 UI Scale Mode = Scale With Screen Size, Reference Resolution = X 1334, Y 750, Screen Match Mode ...