使用模板绑定数据，可以嵌套循环

参考：http://www.doc88.com/p-6621237324128.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- saved from url=(0043)http://jtemplates.tpython.com/example1.html -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="Scripts/jTemplates/example/jquery.js"></script>

    <script type="text/javascript" src="Scripts/jTemplates/jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript">

        $(document).ready(function () {

            //测试数据 JsonData，其中含有嵌套集合，可以双层循环

            var data = {

                name: 'User list',

                list_id: 4,

                table: [

                { id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com', childs: [{ name: "k1", age: "5" }, { name: "k2", age: "3" }, { name: "k2", age: "3" }, { name: "k2", age: "3" }] },

                { id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com' },

                { id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com' },

                { id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com' },

                { id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com' }

                ]

            };

            // 附加模板，模板id：template

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

            // 处理模板，填充数据

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

            //setTemplateElement 指定可处理的模板对象

            //processTemplate 对模板化的对象进行数据处理

            //$T 为模板提供数据调用功能

            //$P 为模板提供参数变量调用功能

            //$Q.version 提供当前JTemplate的版本信息

            //{#if $T.list_id == 3}System List{#elseif $T.list_id == 4}User List{#else}Error List{#/if} //if else 判断

            //{#foreach $T.table as record}{$T.record.name}{#/for} //循环

            //{#foreach $T.table as record begin=1}{$T.record.name}{#/for} //指定起始位置

            //{#foreach $T.table as record count=2}{$T.record.name}{#/for} //指定循环次数

            //{#foreach $T.table as record step=2}{$T.record.name}{#/for} //指定步长

            //{$T.record$index} 编号，从0开始

            //{ $T.record$iteration } 下标，从0开始

            //{ $T.record$first } 是否是第一个元素：true/false

            //{ $T.record$last } 是否是最后一个元素：true/false

            //{ $T.record$total } 总记录数

            //{ $T.record$key } 数据的键值

            //{ $T.record$typeof } 数据类型

            //{#break} {#continue} 跳出循环、结束此次，继续下一次循环

            //支持循环集合用函数代替

            //$("#result1").setTemplate("{#foreach fc as fcValue begin=10 end=40}{$T.fcValue}<br />{#/for}");

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

            //for循环

            //{#for index=1 to 10 }{$T.index}{#/for}

            //{#for index=1 to 10 step=3}{$T.index}{#/for} //正向步长

            //{#for index=1 to 10 step=-3}{$T.index}{#else}nothing{#/for} //负向步长，空循环，输出nothing

            //{#for index=10 to 0 step=-3}{$T.index}{#else}nothing{#/for} //负向步长，输出10 7 4 1

            //{#for index=$T.start to $T.end}{$T.index}{#/for} //循环中使用变量

        });

        //支持循环集合用函数代替

        //var fc = function (step) {

        //    if (step>30) {

        //        return null;

        //    }

        //    return "step:" + step;

        //}

    </script>

    <style type="text/css">

        .jTemplatesTest {

            background: #DDD;

            border: 1px solid #000;

            margin: 2em;

            width: 480px;

        }

            .jTemplatesTest * {

                padding: 4px;

                margin: 2px auto;

            }

            .jTemplatesTest td, tr {

                background: #EEE;

                border: 1px solid black;

            }

    </style>

</head>

<body style="zoom: 1;">

    <!-- 模板内容 开始 -->

    <textarea id="template" style="display: none">

<strong>{$T.name}: {$T.list_id}</strong>

<table>

{#foreach $T.table as record}

<tr>

<td>{$T.record$index+1}</td>

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

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

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

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

</tr>

<tr>

<td colspan="5">Childs</td>

</tr>

{#foreach $T.record.childs as ch}

<tr>

<td></td>

<td></td>

<td>{$T.ch$index+1}</td>

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

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

</tr>

{#/for}

{#/for}

</table>

</textarea>

    <!-- 模板内容 结束 -->

    <!-- 输出数据 开始 -->

    <div id="result1" class="jTemplatesTest">

    </div>

    <!-- 输出数据 结束 -->

    <!--JTemplate 官网：http://jtemplates.tpython.com/-->

</body>

</html>

　　

JTemplate学习（一）的更多相关文章

  1. JTemplate学习（四）

    注释.自定方法.模板嵌套子模板.循环输出不同class <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "htt ...

  2. JTemplate学习（三）

    另一种模板写法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xh ...

  3. JTemplate学习（二）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  4. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  5. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  6. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  7. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

随机推荐

  1. Java 迭代器 工具类

    迭代器:Iterator接口 //获取集合中的对象Iterator<E> iterator() interface Iterator { boolean hasNext(); Object ...

  2. dockers的容器删除

    1.停用全部运行中的容器: docker stop $(docker ps -q) 2.删除全部容器: docker rm $(docker ps -aq) 3.一条命令实现停用并删除容器: dock ...

  3. mysql 更新(九) pymysql模块的使用

    16-pymysql模块的使用   本节重点: pymysql的下载和使用 execute()之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetch ...

  4. 哈希学习（2）—— Hashing图像检索资源

    CVPR14 图像检索papers——图像检索 1.  Triangulation embedding and democratic aggregation for imagesearch (Oral ...

  5. DateFrame

    DateFrame 早期叫作SchemaRDD是存放Row 对象的RDD,每个Row 对象代表一行记录. SchemaRDD 还包含记录的结构信息(即数据字段).SchemaRDD 看起来和普通的RD ...

  6. Alpha版本检测报告

    1.Alpha版本测试报告 发布一篇随笔,作为项目的测试报告,内容包括: (1)测试计划 测试人员 工作安排 覃一霸 编写测试报告 张江波 执行测试.截图测试结果 测试功能 功能 描述 效果 结果 登 ...

  7. js 断点调试

  8. 任务调度的方式：Timer、ScheduledExecutorService、spring task、quartz、XXL-JOB、Elastic-Job

    任务调度 定时任务调度:基于给定的时间点.给定的时间间隔.给定的执行次数自动执行的任务. Timer 介绍 Timer,简单无门槛,一般也没人用. Timer位于java.util包下,其内部包含且仅 ...

  9. a 超链接标签

    Title百度 第一章 第一章 第一章内容 第二章内容 <!DOCTYPE html><html lang="en"><head> <me ...

  10. bat 笔记 一

    echo 有两个参数 off 和 on 注意echo前面要加个@才生效 当 @echo off的时候就是将doc命令将前面的路径去掉,默认其实就是@echo on显示路径: 默认的状态: 输入@ech ...