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. ubuntu安装ruby的几种方法总结

    1.apt-get安装 可以使用apt-cache查询功能,找到对应的可用的ruby版本. $ sudo apt-cache search ruby #这个结果很长,我只截取最后与ruby有关的部分 ...

  2. Bash数组

    1. 数组申明 declare -a array 2. 数组赋值 #法1 array=(var1 var2 var3 ... varN) #法2 array=([]=var1 []=var2 []=v ...

  3. spring boot + mybatis + druid + redis

    接上篇,使用redis做缓存 新建spring boot 工程,添加pom引用 <dependency> <groupId>org.springframework.boot&l ...

  4. Java语法糖之内部类

    例1: class Outer { public void md1(final int a) { final int b = 1; class LocalA { int c = a; } class ...

  5. vmware workstation 下安装ubuntu

    安装时我是借鉴 https://blog.csdn.net/xiaohua0877/article/details/78507631 期间遇到几个问题 键盘不好使,解决办法是重新运行wmware wo ...

  6. MVC源码分析 - Authorize授权过滤器

    从 上一篇 其实能看到, 程序执行的过滤器, 有四种 : 过滤器类型 接口 描述 Authorization IAuthorizationFilter 此类型(或过滤器)用于限制进入控制器或控制器的某 ...

  7. screen 实战后台命令执行备份

    一.安装 [root@vmware ~]# yum install -y screen 二.直接在命令行键入 screen 命令 [root@vmware ~]# screen 三.暂时终端会话 那么 ...

  8. 使用ssh-keygen生成ssh公钥和私钥

    默认是在用户目录下: windows一般为 c:\User\username\.ssh下 linux一般为 /home/username/.ssh 生成的命令如下: ssh-keygen -t rsa ...

  9. Ansible-安装-秘钥-部署-使用

    本文转自:https://www.cnblogs.com/ylqh/p/5902259.html ansiblemaster:192.168.74.146 ansibleslave1 :192.168 ...

  10. MYSQL用户权限管理(Grant,Revoke)

    MySQL可以为不同的用户分配严格的.复杂的权限.这些操作大多都可以用SQL指令Grant(分配权限)和Revoke(回收权限)来实现. Grant可以把指定的权限分配给特定的用户,如果这个用户不存在 ...