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. Java DB 访问（三）mybatis mapper interface接口

    1 项目说明 项目采用 maven 组织 ,依赖 mysql-connector-java,org.mybatis,junit pom 依赖如下: mysql 数据连接 : mysql-connect ...

  2. ES配置文件中文版

    ##################### Elasticsearch Configuration Example ##################### # This file contains ...

  3. 使用Java客户端对Redis进行操作

    一.背景 上篇文章我们介绍了如何在centos7下面进行安装单机版redis以及redis集群.这篇文章,我们来聊一聊如何使用java客户端来进行操作redis.我们知道redis的java客户端有很 ...

  4. xtrabackup 详解

    xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,备份恢复速度快,占用磁盘空间小等特点,并且支持不同情况下的多种备份 ...

  5. Solidity的delete操作

    Solidity中有个特殊的操作符delete用于释放空间,因为区块链技术做为一种公用资源,为避免大家滥用.且鼓励主动对空间的回收,释放空间将会返还一些gas. delete关键字的作用是对某个类型值 ...

  6. openerp7 时区问题解决--改成本地时区

    由于目前openerp的时区,读取的是UTC时间,而我国本地时间比UTC快8小时 问题就导致,写入数据库的时候时间相差8小时,以及Openerp日志输出时间格式也相差8小时和前端显示问题 1.更改op ...

  7. SpringBoot学习（二）——Spring的Java配置方式

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 一.@Configuration 和 @Bean Spring的Java配置方式是通过@Configuration和@Bean ...

  8. 精读JavaScript模式(二)

    我在想知识点怎么去分类,原本计划一章节一篇,但这样会会显得长短不一.更主要的是看到哪写的哪更为随意.那么这一篇还是紧接第一篇进行知识梳理,上篇说到了更优化的for循环,现在继续聊聊其它的循环方式. 1 ...

  9. 在Java的反射中，Class.forName和ClassLoader的区别

    前言 最近在面试过程中有被问到,在Java反射中Class.forName()加载类和使用ClassLoader加载类的区别.当时没有想出来后来自己研究了一下就写下来记录一下. 解释 在java中Cl ...

  10. laravel 标签

    变量标签 {$名} 数组变量标签 {{$名[key]}} 变量调节器 在标签中直接使用php函数,写法和php中一样 条件标签 @if(条件) @endif @if(条件) @else @endif ...