jquery.tmpl.js使用

最新推荐文章于 2021-08-19 22:39:37 发布

日常修行

最新推荐文章于 2021-08-19 22:39:37 发布

阅读量1k

点赞数

分类专栏：前端项目文章标签： jquery.tmpl

本文链接：https://blog.csdn.net/weixin_42609712/article/details/93751735

版权

前端项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

juqery的temp插件使用

jquery.tmpl.js使用

juery因丰富的插件曾被广泛使用，这里介绍一下jQuery模板的使用方法，用到jquery.tmpl.js插件。

入门

<head>
    <meta charset="UTF-8">
    <title>temp-demo</title>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./third_plugin/jquery.tmpl.min.js"></script>
</head>
<body>
    <div>
    ///3、定义一个容器
        <table border="1px" id="demo_table"></table>
    </div>
    <script type="text/javascript">
        //4、定义一个模板
       var temp = '<tr>' +
                       '<td >${ID}</td>' +
                       '<td >${Name}</td>' +
                       '<td >${Num}</td>' +
                       '<td >${Status}</td>' +
                       '<td >${description}</td>' +
                   '</tr>';
        //5、注册模板
       $.template("temp",temp);
       //6、数据源
       var users = [{ID: 'chuizi', Name: 'Joseph Chan', Num: '1', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'aCloud',Name: 'Mary ai云', Num: '3', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'apple',Name: 'Mary 蘋果', Num: '2', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'mi',Name: 'Mary 小米', Num: '6', Status: 1 , description:"这是一个测试代码"}, {
                        ID: 'huawei',Name: 'Mary 荣耀', Num: '8', Status: 1 , description:"这是一个测试代码"}, ];
        ///7、结果渲染
        $("#demo_table").html($.tmpl("temp",users))
    </script>
</body>

步骤

1.创建一个HTML文件；
2. 引入 jquery-1.7.1.min.js 和 jquery.tmpl.min.js ；
3. 定义一个table容器用于封装模板结果（也可以用其他的容器，我这里复用项目中的代码）；
4. 定义一个模板，我这里赋值给了一个变量，其实也可以放在script标签中，通过id调用；
5. 注册模板，用 $.template() 方法注册；
6.构造一个json格式的数据源；
7. 将数据渲染到目标容器中；

参考文档

链接: jquery tmpl 详解.

Alt

日常修行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.tmpl.js使用

juqery的temp插件使用jquery.tmpl.js使用juery因丰富的插件曾被广泛使用，这里介绍一下jQuery模板的使用方法，用到jquery.tmpl.js插件。入门<head> <meta charset="UTF-8"> <title>temp-demo</title> <script t...
复制链接

扫一扫