Jquery.tmpl

它是一个基于jquery的模板展示插件，有了它就可以去展示JSON数据渲染到HTML页中！
一.使用方法
引入Jquery
引入 tmpl
<script src="../Scripts/jquery-1.12.4.min.js"></script>
<script src="../Scripts/jquery.tmpl.min.js"></script>
定义模板块
<script id="template" type="text/x-jquery-tmpl">
//重复项
</script>
二.基本使用示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
    <scriptsrc="js/jquery-1.11.0.js"></script>
    <scriptsrc="js/jquery.tmpl.js"></script>
</head>
<body>
<tableid="div_demo"border="1">
    <tr>
        <td>编号</td><td>姓名</td><td>年龄</td><td>状态</td>
    </tr>
</table>

<scriptid="demo"type="text/x-jquery-tmpl">
    <tr>
    　　<td>${ID}</td>
    　　<td>{{= Name}}</td>     /*同占位符作用相同，注意空格*/
    　　<td>${Number(Age)+1}</td>  /*可以是表达式*/
    　　<td>${Status}</td>
    </tr>
</script>

<scripttype="text/javascript">
    varusers= [{ID:'S1001',Name:'Joseph Chan',Age:'18',Status:1},
        {ID:'S1002',Name:'Mary Cheung',Age:'20'}];
// 引用模板在Table中显示数据
    $("#demo").tmpl(users).appendTo('#div_demo');
</script>
</body>
<ml>

实现思路
获取数据源 tmpl(JsonDataBase)
通过插件的tmpl方法可以对模板进行绑定数据在追加XX元素上

绑定字段的三种方式
${name}
   {{= name}}
   {{html name }}
绑定时的判断
  {{if $data.Status==1 }}
            禁用
         {{else}}
            正常
         {{/if}}

更多方法尽在

转载于:https://www.cnblogs.com/ZaraNet/p/9433853.html

Jquery.tmpl相关推荐

Jquery tmpl模板中if条件有多个时的写法
场景 jquery tmpl正常if-else用法 {{if barNumber==null}} 是 {{else}}否{{/if}} 但是如果想表示当barNumber为空或者为0时显示为是,即想 ...
jQuery.tmpl.js
1.这个插件挺好用的,可以用它来代替微软的gridview,前提是您用了asp.net mvc模式开发下面是找到的一些英文资料,大家可以参考下网址如下: http://api.jquery.com ...
php 掌握jquery,完全掌握jquery tmpl模板
之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里,本文主要为大家带来一篇jquery tmpl模板(实例讲解).小编觉得挺不错的,现在就分享给大家,也给大 ...
html jquery 模板,用模版生成HTML的的框架jquery.tmpl使用详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
jQuery .tmpl() 用法
参考效果: DEMO 下载: jquery-tmpl-master 动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回 ...
jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
放弃用你的InnerHTML来输出HTML吧，jQuery Tmpl不详细讲解
在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模 ...
jquery tmpl 详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
jquery tmpl的使用
1.引用jquery.tmpl.min.js <script type="text/javascript" src="/js/jquery/jquery.tmpl. ...

Jquery.tmpl

Jquery.tmpl相关推荐

最新文章

热门文章