首页 > 代码库 > 适应laytpl 渲染模板数据
适应laytpl 渲染模板数据
前言
当我们异步读取数据过来的时候，还要通过手动赋值，显示在页面上吗，那样你就太OUT了，哥告诉你个新方式。
那就是 laytpl 插件
用法一：渲染单条数据
<table id="Box"> <tr> <td>姓名</td><td>性别</td><td>班级</td><td>分数</td> </tr></table><input type="button" value="http://www.mamicode.com/添加学生分数" 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="http://www.mamicode.com/批量添加学生分数" 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 = http://www.mamicode.com/{"肚1", Sex: "14", Class: "五年级", Core: "99" }, { Name: "肚2", Sex: "14", Class: "五年级", Core: "99" } ] }; laytpl(html).render(data, function (result) { $("#Box").append(result);//异步渲染数据 }); }常用的方法应该就这两种，有不详细的地方，可以参考官方解释。谢谢
适应laytpl 渲染模板数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。