• jquery-tmpl 插件


    做项目时页面上有处功能是:在页面有处列表、有添加,我添加修改或删除后要刷新这个列表,首先想到的是局部刷新,但我们一般说的局部刷新就是利于ajax去后台调用数据并显示,而这里是一整个列表就比较麻烦了,刷新重新加载列表时不止要加载列表,还需把table的标签这些都得重新加载下,写在js里或后台都得写 "<table class="datalist">" 这之类的,太麻烦了 而后期要修改也不好改,于是乎就找到了jquery的tmpl插件,这个貌似还是官方在好几年已经不维护并停留在了beta版,不过还是有它的好用之处,下面源码实例说明:(有好几种用法,下面只说明本人用的感觉比较简单的一种)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var temp = [
                { Name: "blue", explain: "蓝色" },
                { Name: "red", explain: "红色" },
                { Name: "yellow", explain: "黄色" }
            ];
            $("#tempTemplate").tmpl(temp).appendTo("#tempList");
        })
    </script>
    </head>
    
    <body>
            <ul id="tempList"></ul>
            <script id="tempTemplate" type="text/x-jquery-tmpl">
                <li>
                    <b>${Name}</b> (${explain})
                </li>
            </script>
    </body>
    </html>
    View Code

    其实原理很简单,就好比把写好的标签当作模版,用模版出现的关键字去循环出里面的数据再显示出来。

    我要刷新数据的话就用ajax从后台读取下数据并json格式传回即可。

    插件官方下载地址:https://github.com/BorisMoore/jquery-tmpl

  • 相关阅读:
    Java 反射 调用 demo
    Java 使用 DBCP mysql 连接池 做数据库操作
    Java 使用 Dbutils 工具类库 操作mysql
    NodeJs 遍历文件夹内容 上传到服务器.并输出上传记录文件
    Java-JDBC.mysql 工具类 读取本地文件配置
    vue使用axios发送数据请求
    word2vec 理论与实践
    pytorch_SRU(Simple Recurrent Unit)
    Highway Networks Pytorch
    Highway Networks
  • 原文地址:https://www.cnblogs.com/dangzhensheng/p/3897569.html
Copyright © 2020-2023  润新知