基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法

這篇文章主要講解了基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

為靈山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及靈山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、靈山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

正文

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

先寫一個簡單的數(shù)據(jù)綁定

第一步：引入layui的css文件和js文件（自行引入）
第二步：建立視圖，用于呈現(xiàn)渲染結(jié)果，代碼如下：

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

第三步：編寫模版，使用一個script標(biāo)簽存放模板，代碼如下：

<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">
              <h4>營業(yè)額</h4>
              <p><cite >{{d.turnover}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>訂單數(shù)</h4>
              <p><cite >{{d.orderNum}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>已發(fā)貨</h4>
              <p><cite >{{d.delivered}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>未發(fā)貨</h4>
              <p><cite >{{d.unDelivered}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>已取消</h4>
              <p><cite >{{d.cancelled}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>已收貨</h4>
              <p><cite >{{d.received }}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>已評價</h4>
              <p><cite >{{d.evaluated}}</cite></p>
            </a>
          </li>
          <li class="layui-col-xs6 layui-col-sm3">
            <a class="layadmin-backlog-body">
              <h4>好評率</h4>
              <p><cite >{{d.favorableRate}}%</cite></p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </script>

第四步：渲染模版，代碼如下：

<script>
 layui.use(['laytpl'], function () {
   var laytpl = layui.laytpl;

   //訂單統(tǒng)計(正常情況下，此處應(yīng)是ajax返回后的數(shù)據(jù)，這里是模擬數(shù)據(jù)。)
   //渲染模板所用的數(shù)據(jù)
   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的laytpl實現(xiàn)數(shù)據(jù)綁定的方法

是不是非常的簡單呢。因為大量的后臺系統(tǒng)都是基于layui開發(fā)的，遇到一些數(shù)據(jù)展示型的不想用傳統(tǒng)的jquery綁定方式的話，用這個其實非常實用呢。

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

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

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

第二步：table數(shù)據(jù)展示，此處是賦值已知數(shù)據(jù)，開發(fā)當(dāng)中換成自己的數(shù)據(jù)，并給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: [[ //標(biāo)題欄
      { field: 'id', title: 'ID', width: 100 }
      , { field: 'username', title: '用戶名', width: 80 }
      , { field: 'email', title: '郵箱', width: 180 }
      , { field: 'sign', title: '簽名', width: 180 }
      , { field: 'sex', title: '性別', width: 80 }
      , { field: 'city', title: '城市', width: 100 }
      , { field: 'experience', title: '積分', minWidth: 80 }
      , { width: 100, align: 'center', toolbar: '#barDemo' }
    ]]
    , data: [{
      "id": "10001"
      , "username": "杜甫"
      , "email": "xianxin@layui.com"
      , "sex": "男"
      , "city": "浙江杭州"
      , "sign": "人生恰似一場修行"
      , "experience": "116"
      , "ip": "192.168.0.8"
      , "logins": "108"
      , "joinTime": "2016-10-14"
    },{
      "id": "10002"
     , "username": "李白"
     , "email": "xianxin@layui.com"
     , "sex": "男"
     , "city": "浙江杭州"
     , "sign": "人生恰似一場修行"
     , "experience": "12"
     , "ip": "192.168.0.8"
     , "logins": "106"
     , "joinTime": "2016-10-14"
     , "LAY_CHECKED": true
     }]
   });

table頁面效果展示

基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法

第三步，建立一個用來渲染詳情數(shù)據(jù)的彈出框

<div class="demoDetailDiv" >
    <div id="detailDiv"></div>
 </div>

第四步，點擊表格的“查看詳情”，通過laytpl實現(xiàn)數(shù)據(jù)綁定代碼如下：

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;
       });
     } 
   });

顯示效果如下：

基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法

看完上述內(nèi)容，是不是對基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法
文章分享：http://aaarwkj.com/article0/jjggio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)、云服務(wù)器、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

基于layui的laytpl實現(xiàn)數(shù)據(jù)綁定的方法