zoukankan      html  css  js  c++  java
  • 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}}


    更多方法尽在










  • 相关阅读:
    python基础(三)python数据类型
    python基础(二)条件判断、循环、格式化输出
    postman测试上传文件
    postman添加权限验证
    postman添加cookie
    postman发送json格式的post请求
    postman发送post请求
    如果json中的key需要首字母大写怎么解决?
    fastjson转jackson
    git初识
  • 原文地址:https://www.cnblogs.com/ZaraNet/p/9433853.html
Copyright © 2011-2022 走看看