想了半天才想起自己園子的登入密碼。可想而知，多長時間沒登入了

正文

一開始用layui做了幾個管理系統，所以用起來覺得確實很容易上手，管理後臺最常用的就是form和table以及彈窗類。layui提供的form table layer已經是很簡潔好用了，拋開底層的封裝不說，給我們展現出來的使用方法我覺得是非常簡化了。管理用到的除了form table layer之外，經常會有一些統計資料展示或者詳情頁這種內容展示。那麼一些用到的統計資料（除圖表），如文字統計型資料展示。這個時候，用layui的基於laytpl展現這種功能其實是極好的。　

先寫一個簡單的資料繫結

第一步：引入layui的css檔案和js檔案（自行引入）

<div class="layui-row">
    <div class="layui-col-md6" id="orderInfoDiv"></div>    
</div>

第三步：編寫模版，使用一個script標籤存放模板，程式碼如下：

<script type="text/html" id="orderInfo">
    <div class="layui-card">
      <div class="layui-card-header">訂單概況</div>
      <div class="layui-card-body">
        <ul class="layui-row layui-col-space10 layadmin-backlog">
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>營業額</h3>
              <p><cite style="font-size:24px;">{{d.turnover}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>訂單數</h3>
              <p><cite style="font-size:24px;">{{d.orderNum}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>已發貨</h3>
              <p><cite style="font-size:24px;">{{d.delivered}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>未發貨</h3>
              <p><cite style="font-size:24px;">{{d.unDelivered}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>已取消</h3>
              <p><cite style="font-size:24px;">{{d.cancelled}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>已收貨</h3>
              <p><cite style="font-size:24px;">{{d.received }}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>已評價</h3>
              <p><cite style="font-size:24px;">{{d.evaluated}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h3>好評率</h3>
              <p><cite style="font-size:24px;">{{d.favorableRate}}%</cite></p>
            </a>
          </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 class="layui-hide" lay-filter="demoTableFilter" id="demoTable"></table>

<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-event="detail">檢視詳情</a>
 </script>

以下是table的賦值

table.render({
     elem: '#demoTable',cols: [[ //標題欄
      { field: 'id',title: 'ID',width: 100 },{ field: 'username',title: '使用者名稱',width: 80 },{ field: 'email',title: '郵箱',width: 180 },{ field: 'sign',title: '簽名',{ field: 'sex',title: '性別',{ field: 'city',title: '城市',{ field: 'experience',title: '積分',minWidth: 80 },{ width: 100,align: 'center',toolbar: '#barDemo' }
    ]],data: [{
      "id": "10001","username": "杜甫","email": "[email protected]","sex": "男","city": "浙江杭州","sign": "人生恰似一場修行","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"
    },{
      "id": "10002","username": "李白","experience": "12","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true
     }]
   });

table頁面效果展示

第三步，建立一個用來渲染詳情資料的彈出框

<div class="demoDetailDiv" style="display:none;padding:10px;">
    <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 資料繫結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！