zoukankan      html  css  js  c++  java
  • artTemplate-3.0

    下载

      https://github.com/aui/art-template

    导入

    <script src="../Scripts/template-web.js"></script>

     模板语法

    实战代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <script src="../Scripts/jquery-1.10.2.js"></script>
        <script src="../Scripts/template-web.js"></script>
        <script type="text/javascript">
            $(function () {
                var jsonData = {
                    "Count": 2845,
                    "Data": [{
                        "UserName": "张三",
                        "UserCode": "1356",
                        "DepartmentName": "开发一组",
                        "DepartmentNameRemoveCompany": "数据系统中心-研发部-开发一组",
                        "TotalValue": 6175,
                        "Rank": 1,
                        "RowNumber": 1,
                        "IsActive": 1,
                        "IsActiveShow": "在职",
                    }, {
                        "UserName": "李四",
                        "UserCode": "1378",
                        "DepartmentName": "IT运维中心-测试部",
                        "DepartmentNameRemoveCompany": "IT运维中心-测试部",
                        "TotalValue": 960,
                        "Rank": 2,
                        "RowNumber": 2,
                        "IsActive": 1,
                        "IsActiveShow": "在职",
                    }]
                }
                var html = template('test', jsonData);
                $("#resulttbody").html(html);
            })
    
            //自定义函数
            template.defaults.imports.show = function (TotalValue) {
                return TotalValue;
            };
        </script>
    </head>
    <body>
        <!--自定义模板-->
        <script id="test" type="text/html">
            {{each Data as value i}}
            <tr>
                <td>{{value.Rank}}</td>
                <td>{{value.UserName}}</td>
                <td>{{value.UserCode}}</td>
                <td>{{value.IsActiveShow}}</td>
                <td>{{value.DepartmentNameRemoveCompany}}</td>
                <td>{{show(value.TotalValue)}}</td>
                <td><a href="/Detail/{{value.UserCode}} " target='_blank'>详细</a></td>
            </tr>
            {{/each}}
        </script>
        <!--数据表格-->
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-light">
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>编号</th>
                    <th>是否在职</th>
                    <th>部门</th>
                    <th>成长值</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="resulttbody"></tbody>
        </table>
        <!--分页-->
        <div class="pagebt" id="pagination"></div>
        <input type="hidden" id="totalCnt" value="" />
    </body>
    </html>

    https://www.cnblogs.com/jiqiyoudu/p/4588042.html

  • 相关阅读:
    计算机与软件工程 作业一
    软件工程作业6 咸鱼不闲团队 校园二手交易系统
    软件工程 作业5
    计算与软件工程 作业4
    软件工程第四次作业评价总结
    计算与软件工程 作业3
    计算与软件共程作业2
    计算与软件工程 作业一
    计算与软件工程作业六
    计算与软件工程作业五
  • 原文地址:https://www.cnblogs.com/cnki/p/9534957.html
Copyright © 2011-2022 走看看