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. es-04-mapping和setting的建立

    mapping和setting, 使用java客户端比较难组装, 可以使用python或者scala 这儿直接在kibana中进行DSL创建 1, mapping 创建索引的时候, 可以事先对数据进行 ...

  2. xshell 登陆堡垒机实现自动跳转

    1, 正常使用用户密码登录堡垒机并保存登陆配置 2, 配置登陆脚本 添加第一个: expect 为空send :ssh root@ip 添加第二个: expect root@ip's password ...

  3. 价值 1500 美元的 iPhone 值得买吗

    原文链接:价值 1500 美元的 iPhone 值得买吗 最新款 iPhone 的最高配型号在含税的情况下价格远超 1500 美元.价格合理吗?合理.理由如下:1,硬件已与笔记本电脑相当,价格也相当: ...

  4. Maven 入门——认识 Maven

    Maven /ˈmāvən/ ,可以翻译成"专家",是一款来自 Apache 组织的开源项目,用于项目管理.主要服务于基于 Java 平台的项目构建.依赖管理和项目信息管理. 构建 ...

  5. DataSet 多表关系

    protected void Page_Load(object sender, EventArgs e) { string connectionString = @"Data Source= ...

  6. 复刻smartbits的国产网络测试工具minismb-网络连接数测试方法

    复刻smartbits的网路性能测试工具MiniSMB,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和最 ...

  7. python的Web框架：初识Django

    web应用程序 本质 socket服务端 浏览器本质是一个socket客户端 1. 服务器程序 socket请求 接受HTTP请求,发送HTTP响应. 比较底层,繁琐,有专用的服务器软件,如:Apac ...

  8. [总结]其他杂项数学相关（定理&证明&板子）

    目录 写在前面 一类反演问题 莫比乌斯反演 快速莫比乌斯变换(反演)与子集卷积 莫比乌斯变换(反演) 子集卷积 二项式反演 内容 证明 应用举例 另一形式 斯特林反演 第一类斯特林数 第二类斯特林数 ...

  9. ASP.NET编辑与更新数据(非GridView控件实现)

    Insus.NET在实现<ASP.NET开发,从二层至三层,至面向对象 (5)>http://www.cnblogs.com/insus/p/3880606.html 中,没有把数据编辑与 ...

  10. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...