JQuery Tmpl的使用

至于概念性的东西就不再说了,可参考链接:http://www.phpddt.com/dhtml/jquery_tmpl.html  或  http://www.jb51.net/article/35811.htm ,接下来将是对列表的展现案例:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速简单。">
        <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, frontend, web development">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
        <meta name="author" content="译者:网赛<wangsai@bootcss.com>">

        <title>测试</title>

        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <!--导入jquery.tmpl.js文件-->
        <script type="text/javascript" src="jquerytmpl/jquery-tmpl-master/jquery.tmpl.js"></script>

        <style type="text/css">
            
            .table1{
                text-align: center;
            }

            h2{
                text-align: center;
            }

        </style>

        <!--实现体-->
        <script>
            $(function () {
                
                var website = [{ url: '2015-8-26', name: '3600', tags: 'Q币' }, { url: '2015-8-26', name: '3600', tags: 'Q币'}];

                var wsdata = { time:'2015-8-28', money:'3600', type:'话费'};

                var datatable = [
                    { time:'2015-8-28', money:'3600', type:'话费'},
                    { time:'2015-8-28', money:'3612', type:'支付宝'}
                ];

                $('#myTemplate').tmpl({a:datatable}).appendTo('.table');
                //$('#myTemplate').tmpl(website, {
                    //getTags: function (separator) {
                        //return this.data.tags.join(separator);
                    //}
                //}).appendTo('#rows');
            });
        </script>

        <script id="myTemplate" type="text/x-jquery-tmpl">

            {{each a}}
                <tr>
                    <td>${$value.time}</td>
                    <td>${$value.money}</td>
                    <td>${$value.type}</td>
                </tr>
            {{/each}}

        </script>

    </head>

    <body>

        <table class="table table-hover">

            <tr>
                <th>时间</th>
                <th>金额</th>
                <th>类型</th>
            </tr>

        </table>


        <!--1111111111111111111111111111111111111111111111111111-->

        <div id="div_each"></div>

        <div class="container" id="container">
            <table class="table table-hover">
                <h2>兑换记录</h2>
                <tr>
                    <th>时间</th>
                    <th>金额</th>
                    <th>类型</th>
                </tr>
                <tr>
                    <td>2015-8-26</td>
                    <td>3600</td>
                    <td>Q币</td>
                </tr>
            </table>
        </div>

        <script type="text/javascript" type="text/x-jquery-tmpl">
        </script>

        <script id="each" type="text/x-jquery-tmpl">
            <h3>users</h3>
            {{each(i,user) users}}
                <div>${i+1}:{{= user.name}}</div>
                {{if i==0}}
                    <h4>group</h4>
                    {{each(j,group) groups}}
                        <div>${group.name}</div>
                    {{/each}}
                {{/if}}
            {{/each}}
            <h3>depart</h3>
            {{each departs}}
                <div>{{= $value.name}}</div>
            {{/each}}
        </script>

        <script type="text/javascript">
            var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
            $("#each").tmpl(eachData).appendTo('#div_each');
        </script>

    </body>
</html>

posted @ 2015-09-02 13:01  飞牛冲天  阅读(1189)  评论(0编辑  收藏  举报