zoukankan      html  css  js  c++  java
  • jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇

    <span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html>
    
    <html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery - jTemplates</title>
        <!-- <link rel="stylesheet" type="text/css" href="./css/style.css"> -->
        <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
        <style type="text/css">
        .container{
             1000px;
            height: 600px;
            margin: 0 auto;
        }
        .template{
            display: none;
        }
        table{
            background-color: #fff;
        }
        table tr th{
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        table tr td{
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        </style>
        <script type="text/javascript">
        $(function(){
            // 初始化JSON数据
            // 通过getJSON方法加载
            // $.getJSON("./data/dataSource1.json", function(data){
            //     // 设置模板
            //     $("#result").setTemplateElement("template");
            //     // 给模板加载数据
            //     $("#result").processTemplate(data);
            // });
    
            // 通过ajax方法加载
            $.ajax({
                type:"post",
                dataType:"json",
                url:"./data/dataSource1.json",
                success:function(data){
                    // alert(data);
                    // 设置模板
                    $("#result").setTemplateElement("template");
                    // 给模板加载数据
                    $("#result").processTemplate(data);
                },
                error:function(error){
                    alert("error:" + error.responseText);
                }
            });
        });
        </script>
    </head>
    <body>
        <div class="container">
            <div><h1>标题</h1></div>
            <div id="result"></div>
            <textarea id="template" class="template">
                {#template MAIN}
                <table>
                    <tr>
                        <td>Id</td>
                        <td>标题</td>
                        <td>发布时间</td>
                    </tr>
                    {#foreach $T.Lists as r}
                    {#include ROW root=$T.r}
                    {#/for}
                </table>
                {#/template MAIN}
    
                {#template ROW}
                <tr>
                    <td>{$T.Id}</td>
                    <td>{$T.Title}</td>
                    <td>{$T.CreateDate}</td>
                </tr>
                {#/template ROW}
            </textarea>
        </div>
    </body>
    </html></span>
    

      这个是一个例子

  • 相关阅读:
    Loved
    什么是REST
    统一资源定位符URL(Uniform Resource Locator)
    HTTP工作原理
    系统程序员成长计划内存管理(一)
    系统程序员成长计划工程管理(四)
    系统程序员成长计划-内存管理(四)
    HTTP请求报文格式
    系统程序员成长计划内存管理(二)
    系统程序员成长计划-内存管理(三)
  • 原文地址:https://www.cnblogs.com/ching2009/p/6100749.html
Copyright © 2011-2022 走看看