Jquery.tmpl

最新推荐文章于 2024-03-09 15:37:20 发布

qq_39110534

最新推荐文章于 2024-03-09 15:37:20 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/qq_39110534/article/details/84454267

版权

它是一个基于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}}

更多方法尽在

qq_39110534

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery.tmpl

它是一个基于jquery的模板展示插件，有了它就可以去展示JSON数据渲染到HTML页中！一.使用方法引入Jquery引入 tmpl&lt;script src="../Scripts/jquery-1.12.4.min.js"&gt;&lt;/script&gt;&lt;script src="../Scripts/jquery.tmpl.min.js"&gt;&lt;/script...
复制链接

扫一扫