Tmpl提供了几种tag:
${}:等同于{{=}},是输出变量,通过了html编码的。
{{html}}:输出变量html,但是没有html编码,适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑,$value访问迭代变量。
现在主要介绍利用tmpl构造复杂一点的表格,比如说动态加载数据以及单元格合并
<div class="shadow"> <div class="title"><span>打分信息</span></div> <div class="content" id="cengji01" style="display:"> <table width="100%" border="1" cellspacing="0" class="tableborder"> <tr class="tr_normal"> <td class="table_title" >项目</td> <td class="table_title">评估细项</td> <td class="table_title">分值</td> <td class="table_title">评分标准</td> <td class="table_title">评分</td> </tr> <tbody id="templateItemList"> </tbody> </table> <script id="templateItemListTmpl" type="text/x-jquery-tmpl"> {{each(i,data) template.itemList}} <tr class="tr_normal" onmouseover="this.className='tr_act'" onmouseout="this.className='tr_normal'"> {{if i==0||template.itemList[i-1].parentItemName!=data.parentItemName}} <td rowspan="{{= data.rowCount}}" width="8%">{{= data.parentItemName}}</td> {{/if}} <td width="8%">{{= data.itemName}}</td> <td width="5%">{{= data.maxScore}}</td> <td width="60%">{{= data.itemDesc}}</td> <td width="5%">{{= data.itemScore}}</td> </tr> {{/each}} <tr> <td colspan="4" align="center">合计</td> <td style="font-weight:bold;"> {{= template.sumScore}}</td> </tr> {{each(i,data) template.otherItemList}} <tr class="tr_normal" onmouseover="this.className='tr_act'" onmouseout="this.className='tr_normal'"> <td width="8%">{{= data.parentItemName}}</td> <td width="8%" colspan="3" align="center">{{= data.itemDesc}}</td> <td width="5%">{{= data.itemScore}}</td> </tr> {{/each}} <tr> <td>最后得分</td> <td colspan="4" align="center" style="font-weight:bold;color:red;">{{= template.allSumScore}}</td> </tr> <tr> <td>综合评语</td> <td colspan="4"> 希望加强管理,继续努力!</td> </tr> </script> </div> </div>
$().ready(function() { $('#templateItemListTmpl').tmpl(data.data).appendTo('#templateItemList'); })
效果图如下
相关推荐
jquery.tmpl.js v1.0 内含: jquery.tmpl.js jquery.tmplPlus.js 以及对应的min版本
jquery.tmpl.js jquery.tmpl.js jquery.tmpl.js
jquery-tmpl-master.zip
jquery-tmpl
jquery tmpl模板技术,官方例子,方便不能去国外网站的。
web快速部署 jquery tmpl demo web部署数据
适用与jquery 的字符替换模板,示例:$(属性/元素).tmpl
添加的版本:1.4.3 jQuery.tmpl(template [,data] [,options]) template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型,包括Array或Object。 options用户定义的键/值对的可...
jQuery .tmpl(), .template()大全集
NULL 博文链接:https://nannan408.iteye.com/blog/2126761
之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途...
JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。
解决 [object HTMLInputElement]之类默认值的bug,作者已经7年没有更新此插件了,因此遇到此问题我对源码做了修改,修改时间:2017-11-01。有问题请联系我:31705252@qq.com
网址:http://api.jquery.com/jquery.tmpl/。 Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的。 {{html}}:输出变量html,但是没有html编码,适合输出html代码。 {{if }} {{else}}:提供了分支...
解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl
前端开源库-ape-tmplAPE TMPL,APE框架模板。