如何基于layui的laytpl实现数据绑定
- 2020 年 4 月 10 日
- 筆記
想了半天才想起自己园子的登录密码。可想而知，多长时间没登录了
正文
一开始用layui做了几个管理系统，所以用起来觉得确实很容易上手，管理后台最常用的就是form和table以及弹窗类。layui提供的form table layer已经是很简洁好用了，抛开底层的封装不说，给我们展现出来的使用方法我觉得是非常简化了。管理用到的除了form table layer之外，经常会有一些统计数据展示或者详情页这种内容展示。那么一些用到的统计数据（除图表），如文字统计型数据展示。这个时候，用layui的基于laytpl展现这种功能其实是极好的。
先写一个简单的数据绑定
第一步：引入layui的css文件和js文件（自行引入）
第二步：建立视图，用于呈现渲染结果，代码如下：
1 <div class="layui-row"> 2 <div class="layui-col-md6" id="orderInfoDiv"></div> 3 </div>
第三步：编写模版，使用一个script标签存放模板，代码如下：
1 <script type="text/html" id="orderInfo"> 2 <div class="layui-card"> 3 <div class="layui-card-header">订单概况</div> 4 <div class="layui-card-body"> 5 <ul class="layui-row layui-col-space10 layadmin-backlog"> 6 <li class="layui-col-xs6 layui-col-sm3"> 7 <a class="layadmin-backlog-body"> 8 <h3>营业额</h3> 9 <p><cite style="font-size:24px;">{{d.turnover}}</cite></p> 10 </a> 11 </li> 12 <li class="layui-col-xs6 layui-col-sm3"> 13 <a class="layadmin-backlog-body"> 14 <h3>订单数</h3> 15 <p><cite style="font-size:24px;">{{d.orderNum}}</cite></p> 16 </a> 17 </li> 18 <li class="layui-col-xs6 layui-col-sm3"> 19 <a class="layadmin-backlog-body"> 20 <h3>已发货</h3> 21 <p><cite style="font-size:24px;">{{d.delivered}}</cite></p> 22 </a> 23 </li> 24 <li class="layui-col-xs6 layui-col-sm3"> 25 <a class="layadmin-backlog-body"> 26 <h3>未发货</h3> 27 <p><cite style="font-size:24px;">{{d.unDelivered}}</cite></p> 28 </a> 29 </li> 30 <li class="layui-col-xs6 layui-col-sm3"> 31 <a class="layadmin-backlog-body"> 32 <h3>已取消</h3> 33 <p><cite style="font-size:24px;">{{d.cancelled}}</cite></p> 34 </a> 35 </li> 36 <li class="layui-col-xs6 layui-col-sm3"> 37 <a class="layadmin-backlog-body"> 38 <h3>已收货</h3> 39 <p><cite style="font-size:24px;">{{d.received }}</cite></p> 40 </a> 41 </li> 42 <li class="layui-col-xs6 layui-col-sm3"> 43 <a class="layadmin-backlog-body"> 44 <h3>已评价</h3> 45 <p><cite style="font-size:24px;">{{d.evaluated}}</cite></p> 46 </a> 47 </li> 48 <li class="layui-col-xs6 layui-col-sm3"> 49 <a class="layadmin-backlog-body"> 50 <h3>好评率</h3> 51 <p><cite style="font-size:24px;">{{d.favorableRate}}%</cite></p> 52 </a> 53 </li> 54 </ul> 55 </div> 56 </div> 57 </script>
第四步：渲染模版，代码如下：
1 <script> 2 layui.use(['laytpl'], function () { 3 var laytpl = layui.laytpl; 4 5 //订单统计(正常情况下，此处应是ajax返回后的数据，这里是模拟数据。) 6 //渲染模板所用的数据 7 var data = { turnover: "23,251", orderNum: "256", delivered: "16", unDelivered: "130", cancelled: "10", received: "100", evaluated: "80", favorableRate: "80" } 8 9 var orderInfoTpl = orderInfo.innerHTML //获取模板，即上面所定义的 <script id="orderInfo"> 10 , orderInfoDiv = document.getElementById('orderInfoDiv'); //视图 即上面的 <div id="orderInfoDiv"> 11 laytpl(orderInfoTpl).render(data, function (html) { //渲染视图 12 orderInfoDiv.innerHTML = html; 13 }); 14 }) 15 </script>
第五步：效果显示如下
是不是非常的简单呢。因为大量的后台系统都是基于layui开发的，遇到一些数据展示型的不想用传统的jquery绑定方式的话，用这个其实非常实用呢。
详情数据展示
如果是一个table，点击查看详情的话，也可以用这种方式展示数据
第一步：引入layui的css文件和js文件（自行引入），页面中用到的css样式自行编写。
第二步：table数据展示，此处是赋值已知数据，开发当中换成自己的数据，并给table定义一个点击事件
1 <table class="layui-hide" lay-filter="demoTableFilter" id="demoTable"></table>
1 <script type="text/html" id="barDemo"> 2 <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a> 3 </script>
以下是table的赋值
1 table.render({ 2 elem: '#demoTable' 3 , cols: [[ //标题栏 4 { field: 'id', title: 'ID', width: 100 } 5 , { field: 'username', title: '用户名', width: 80 } 6 , { field: 'email', title: '邮箱', width: 180 } 7 , { field: 'sign', title: '签名', width: 180 } 8 , { field: 'sex', title: '性别', width: 80 } 9 , { field: 'city', title: '城市', width: 100 } 10 , { field: 'experience', title: '积分', minWidth: 80 } 11 , { width: 100, align: 'center', toolbar: '#barDemo' } 12 ]] 13 , data: [{ 14 "id": "10001" 15 , "username": "杜甫" 16 , "email": "[email protected]" 17 , "sex": "男" 18 , "city": "浙江杭州" 19 , "sign": "人生恰似一场修行" 20 , "experience": "116" 21 , "ip": "192.168.0.8" 22 , "logins": "108" 23 , "joinTime": "2016-10-14" 24 },{ 25 "id": "10002" 26 , "username": "李白" 27 , "email": "[email protected]" 28 , "sex": "男" 29 , "city": "浙江杭州" 30 , "sign": "人生恰似一场修行" 31 , "experience": "12" 32 , "ip": "192.168.0.8" 33 , "logins": "106" 34 , "joinTime": "2016-10-14" 35 , "LAY_CHECKED": true 36 }] 37 });
table页面效果展示
第三步，建立一个用来渲染详情数据的弹出框
<div class="demoDetailDiv" style="display:none;padding:10px;"> <div id="detailDiv"></div> </div>
第四步，点击表格的“查看详情”，通过laytpl实现数据绑定 代码如下：
1 table.on('tool(demoTableFilter)', function (obj) { 2 var data = obj.data; 3 if (obj.event === 'detail') { 4 index = layer.open({ 5 title: '查看详情', 6 type: 1, 7 move: false, 8 content: $('.demoDetailDiv'), 9 area: ['750px', '300px'], 10 resize: false, 11 scrollbar: false 12 }); 13 var demoDetailTpl = demoDetail.innerHTML //获取模板， 14 , detailDiv = document.getElementById('detailDiv'); //视图 15 laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图 16 detailDiv.innerHTML = html; 17 }); 18 } 19 });
显示效果如下：
总结：
以上是记录一点最简单的用laytpl渲染数据的方式。
