前言

当我们异步读取数据过来的时候,还要通过手动赋值,显示在页面上吗,那样你就太OUT了,哥告诉你个新方式。

那就是 laytpl 插件

用法一:渲染单条数据

<table id="Box">
<tr>
<td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
</tr>
</table>
<input type="button" value="添加学生分数" onclick="UseInfo1()"/>
<script type="text/html" id="box-class-tem1">
<tr>
<td>{{d.Name}}</td><td>{{d.Sex}}</td><td>{{d.Class}}</td><td>{{d.Core}}</td>
</tr>
</script> function UseInfo1() {
var html = $("#box-class-tem1").html(); //获取模板
/*单条数据*/
var ojb = {
Name: "肚子",
Sex: "14",
Class: "五年级",
Core: "99"
};
laytpl(html).render(ojb, function (result) {
$("#Box").append(result);
});
}

  

用法二:渲染多条数据

<table id="Box">
<tr>
<td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
</tr>
</table>
<input type="button" value="批量添加学生分数" onclick="UseInfo2()"/> <script type="text/html" id="box-class-tem2">
{{# for(var i = 0; i < d.list.length; i++){ }}
<tr>
<td>{{d.list[i].Name}}</td><td>{{d.list[i].Sex}}</td><td>{{d.list[i].Class}}</td><td>{{d.list[i].Core}}</td>
</tr>
{{# } }}
</script> function UseInfo2() {
var html = $("#box-class-tem2").html(); //获取模板
/*多条数据*/
var data = {
list: [{
Name: "肚1",
Sex: "14",
Class: "五年级",
Core: "99"
},
{
Name: "肚2",
Sex: "14",
Class: "五年级",
Core: "99"
}
]
};
laytpl(html).render(data, function (result) {
$("#Box").append(result);//异步渲染数据
});
}

  常用的方法应该就这两种,有不详细的地方,可以参考官方解释。谢谢

适应laytpl 渲染模板数据的更多相关文章

  1. 基于JS正则实现模板数据动态渲染

    最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...

  2. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

  3. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  4. 10_常见的get和post请求_路由器_ejs服务器渲染模板引擎

    1. 常见的 get 和 post 请求有哪些? 常见的发送 get 请求方式: 在浏览器地址栏输入 url 地址访问 所有的标签默认发送的是 get 请求:如 script link img a f ...

  5. JsRender 前端渲染模板基础学习

    JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...

  6. flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)

    flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...

  7. 云平台项目--学习经验--jsrender前端渲染模板

    jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...

  8. JsRender 前端渲染模板常用API学习

    JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...

  9. 前端渲染模板(一):Thymeleaf

    一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构  Maven的资源文件目录:/src/java/resources spring-boot ...

随机推荐

  1. python smtplib email

    监控系统需要触发报警邮件, 简单笔记一下的用到的库. smtplib class smtplib.SMTP([host[, port[, local_hostname[, timeout]]]]) 返 ...

  2. 导入excel数据到数据库

    1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...

  3. JS中多种方式创建对象

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function ...

  4. EXPORT_SYMBOL的使用

    转自:http://blog.csdn.net/cailiwei712/article/details/7998525 在查看内核驱动代码的时候会经常看到在一些函数后面总会跟EXPORT_SYMBOL ...

  5. sybase 收集常用sql语句

    -------创建sybase设备 语句--------- disk init name="DEV_DB_CLIENT_DAT26", physname="F:\syba ...

  6. 【leetcode】Climbing Stairs

    题目简述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...

  7. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  8. SpringMVC 常用注解(1)

    /**  * @RequestMapping 除了修饰方法 还可以修饰类  * 1).类定义处:提供初步的请求映射信息,相当于WEB应用的根目录  * 2).方法定义处,提供进一步的细分映射信息,相对 ...

  9. java基础-泛型2

    浏览以下内容前,请点击并阅读 声明 6 类型推测 java编译器能够检查所有的方法调用和对应的声明来决定类型的实参,即类型推测,类型的推测算法推测满足所有参数的最具体类型,如下例所示: //泛型方法的 ...

  10. centos yum安装saltstack

    1.导入安装源 centos5 rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm cen ...