使用模板绑定数据,可以嵌套循环
参考: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>