如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定

想了半天才想起自己園子的登錄密碼?？上攵?，多長(zhǎng)時(shí)間沒(méi)登錄了

正文
一開(kāi)始用layui做了幾個(gè)管理系統(tǒng)，所以用起來(lái)覺(jué)得確實(shí)很容易上手，管理后臺(tái)最常用的就是form和table以及彈窗類。layui提供的form table
layer已經(jīng)是很簡(jiǎn)潔好用了，拋開(kāi)底層的封裝不說(shuō)，給我們展現(xiàn)出來(lái)的使用方法我覺(jué)得是非常簡(jiǎn)化了。管理用到的除了form table
layer之外，經(jīng)常會(huì)有一些統(tǒng)計(jì)數(shù)據(jù)展示或者詳情頁(yè)這種內(nèi)容展示。那么一些用到的統(tǒng)計(jì)數(shù)據(jù)（除圖表），如文字統(tǒng)計(jì)型數(shù)據(jù)展示。這個(gè)時(shí)候，用layui的基于laytpl展現(xiàn)這種功能其實(shí)是極好的。
　

先寫(xiě)一個(gè)簡(jiǎn)單的數(shù)據(jù)綁定

第一步：引入layui的css文件和js文件（自行引入）
第二步：建立視圖，用于呈現(xiàn)渲染結(jié)果，代碼如下：
1 <div class="layui-row"> 2 <div class="layui-col-md6" id="orderInfoDiv"></div>
3 </div>
第三步：編寫(xiě)模版，使用一個(gè)script標(biāo)簽存放模板，代碼如下：
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>營(yíng)業(yè)額</
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>訂單數(shù)</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>已發(fā)貨</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
>未發(fā)貨</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
>已評(píng)價(jià)</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>好評(píng)率</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 //訂單統(tǒng)計(jì)(正常情況下，此處應(yīng)是ajax返回后的數(shù)據(jù)，這里是模擬數(shù)據(jù)。) 6 //渲染模板所用的數(shù)據(jù) 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>
第五步：效果顯示如下



是不是非常的簡(jiǎn)單呢。因?yàn)榇罅康暮笈_(tái)系統(tǒng)都是基于layui開(kāi)發(fā)的，遇到一些數(shù)據(jù)展示型的不想用傳統(tǒng)的jquery綁定方式的話，用這個(gè)其實(shí)非常實(shí)用呢。

詳情數(shù)據(jù)展示

如果是一個(gè)table，點(diǎn)擊查看詳情的話，也可以用這種方式展示數(shù)據(jù)

第一步：引入layui的css文件和js文件（自行引入），頁(yè)面中用到的css樣式自行編寫(xiě)。

第二步：table數(shù)據(jù)展示，此處是賦值已知數(shù)據(jù)，開(kāi)發(fā)當(dāng)中換成自己的數(shù)據(jù)，并給table定義一個(gè)點(diǎn)擊事件
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>
用來(lái)渲染的數(shù)據(jù)
1 <script type="text/html" id="demoDetail"> 2 <div> 3 <div class="disF"> 4
<div class="flex1"> 5 <div class="disF"> 6 <label>姓名：</label> 7 <p
class="flex1">{{d.username}}</p> 8 </div> 9 </div> 10 <div class="flex1"> 11
<div class="disF">12 <label>郵箱：</label> 13 <p class="flex1">{{d.email}}</p> 14
</div>15 </div> 16 <div class="flex1"> 17 <div class="disF"> 18
<label>簽名：</label>19 <p class="flex1">{{d.sign}}</p> 20 </div> 21 </div> 22
</div>23 <div class="disF"> 24 <div class="flex1"> 25 <div class="disF"> 26
<label>性別：</label>27 <p class="flex1">{{d.sex}}</p> 28 </div> 29 </div> 30 <div
class="flex1">31 <div class="disF"> 32 <label>城市：</label> 33 <p
class="flex1">{{d.city}}</p>34 </div> 35 </div> 36 <div class="flex1"> 37 <div
class="disF">38 <label>積分：</label> 39 <p class="flex1">{{d.experience}}</p> 40
</div>41 </div> 42 </div> 43 </div> 44 </script>
以下是table的賦值
1 table.render({ 2 elem: '#demoTable' 3 , cols: [[ //標(biāo)題欄 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": "人生恰似一場(chǎng)修行"
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":
"人生恰似一場(chǎng)修行"31 , "experience": "12" 32 , "ip": "192.168.0.8" 33 , "logins": "106"
34 , "joinTime": "2016-10-14" 35 , "LAY_CHECKED": true 36 }] 37 });
table頁(yè)面效果展示



第三步，建立一個(gè)用來(lái)渲染詳情數(shù)據(jù)的彈出框
<div class="demoDetailDiv" style="display:none;padding:10px;"> <div id
="detailDiv"></div> </div>
第四步，點(diǎn)擊表格的“查看詳情”，通過(guò)laytpl實(shí)現(xiàn)數(shù)據(jù)綁定?代碼如下：
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 });
顯示效果如下：



總結(jié)：

以上是記錄一點(diǎn)最簡(jiǎn)單的用laytpl渲染數(shù)據(jù)的方式。

• ? 上一篇：（C#、JavaScript）面向?qū)ο蟮某绦蛟O(shè)計(jì)
• ? 下一篇： 局部NGINX后業(yè)務(wù)實(shí)例過(guò)載怎么辦？F5有什么負(fù)載均衡解決方案？