posts - 609,  comments - 13,  views - 64万
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
JTemplate学习（一）

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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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>

　　

posted on   邢帅杰  阅读(467)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
Powered by:
博客园
Copyright © 2025 邢帅杰
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI IDE Trae