一开始用layui做了几个管理系统，所以用起来觉得确实很容易上手，管理后台最常用的就是form和table以及弹窗类。layui提供的form table layer已经是很简洁好用了，抛开底层的封装不说，给我们展现出来的使用方法我觉得是非常简化了。管理用到的除了form table layer之外，经常会有一些统计数据展示或者详情页这种内容展示。那么一些用到的统计数据（除图表），如文字统计型数据展示。这个时候，用layui的基于laytpl展现这种功能其实是极好的。
先写一个简单的数据绑定
第一步：引入layui的css文件和js文件（自行引入）
第二步：建立视图，用于呈现渲染结果，代码如下：
div div id="orderInfoDiv" /div /div
第三步：编写模版，使用一个script标签存放模板，代码如下：
script type="text/html" id="orderInfo"
div
div 订单概况 /div
div
h3 营业额 /h3
p cite {{d.turnover}} /cite /p
/li
h3 订单数 /h3
p cite {{d.orderNum}} /cite /p
/li
h3 已发货 /h3
p cite {{d.delivered}} /cite /p
/li
h3 未发货 /h3
p cite {{d.unDelivered}} /cite /p
/li
h3 已取消 /h3
p cite {{d.cancelled}} /cite /p
/li
h3 已收货 /h3
p cite {{d.received }} /cite /p
/li
h3 已评价 /h3
p cite {{d.evaluated}} /cite /p
/li
h3 好评率 /h3
p cite {{d.favorableRate}}% /cite /p
/li
/ul
/div
/div
/script
第四步：渲染模版，代码如下：
script
layui.use(['laytpl'], function () {
var laytpl = layui.laytpl;
//订单统计(正常情况下，此处应是ajax返回后的数据，这里是模拟数据。)
//渲染模板所用的数据
var data = { turnover: "23,251", orderNum: "256", delivered: "16", unDelivered: "130", cancelled: "10", received: "100", evaluated: "80", favorableRate: "80" }
var orderInfoTpl = orderInfo.innerHTML //获取模板，即上面所定义的 script id="orderInfo"
, orderInfoDiv = document.getElementById('orderInfoDiv'); //视图 即上面的 div id="orderInfoDiv"
laytpl(orderInfoTpl).render(data, function (html) { //渲染视图
orderInfoDiv.innerHTML = html;
/script
第五步：效果显示如下
是不是非常的简单呢。因为大量的后台系统都是基于layui开发的，遇到一些数据展示型的不想用传统的jquery绑定方式的话，用这个其实非常实用呢。
详情数据展示
如果是一个table，点击查看详情的话，也可以用这种方式展示数据
第一步：引入layui的css文件和js文件（自行引入），页面中用到的css样式自行编写。
第二步：table数据展示，此处是赋值已知数据，开发当中换成自己的数据，并给table定义一个点击事件
table lay-filter="demoTableFilter" id="demoTable" /table
table页面效果展示
第三步，建立一个用来渲染详情数据的弹出框
div div id="detailDiv" /div /div
第四步，点击表格的“查看详情”，通过laytpl实现数据绑定代码如下：
table.on('tool(demoTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
index = layer.open({
title: '查看详情',
type: 1,
move: false,
content: $('.demoDetailDiv'),
area: ['750px', '300px'],
resize: false,
scrollbar: false
var demoDetailTpl = demoDetail.innerHTML //获取模板，
, detailDiv = document.getElementById('detailDiv'); //视图
laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图
detailDiv.innerHTML = html;
});
显示效果如下：
总结：
以上是记录一点最简单的用laytpl渲染数据的方式。到此这篇关于如何基于layui的laytpl实现数据绑定的示例代码的文章就介绍到这了,更多相关layui laytpl 数据绑定内容请搜索凡科以前的文章或继续浏览下面的