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

  • 相关阅读:
    数据库遇到的2个奇葩的事情
    虚IP解决程序连只读服务器故障漂移
    SQL Server 主库DML操作慢故障处理过程
    优雅地使用pt-archiver进行数据归档(转)
    Mysql表读写、索引等操作的sql语句效率优化问题
    MySQL Performance-Schema(一) 配置篇
    MySQL Performance-Schema(三) 实践篇
    MySQL Performance-Schema(二) 理论篇
    MySQL案例-并行复制乱序提交引起的同步异常
    (转)MySQL- 5.7 sys schema笔记,mysql-schema
  • 原文地址:https://www.cnblogs.com/cnki/p/9534957.html
Copyright © 2011-2022 走看看