欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

小編給大家分享一下layui如何實(shí)現(xiàn)數(shù)據(jù)綁定，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)為客戶提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁設(shè)計(jì)、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都手機(jī)網(wǎng)站制作等網(wǎng)站方面業(yè)務(wù)。

layui實(shí)現(xiàn)數(shù)據(jù)綁定的方法：首先引入layui的css文件和js文件；然后建立視圖，用于呈現(xiàn)渲染結(jié)果；接著編寫模版，使用一個(gè)script標(biāo)簽存放模板；最后渲染模版即可。

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

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

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

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

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

 <p class="layui-row">        
 <p class="layui-col-md6" id="orderInfop"></p>       
</p>

第三步：編寫模版，使用一個(gè)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 style="font-size:24px;">{{d.turnover}}</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-xs6 layui-col-sm3">
                        <a class="layadmin-backlog-body">
                            <h4>訂單數(shù)</h4>
                            <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">
                            <h4>已發(fā)貨</h4>
                            <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">
                            <h4>未發(fā)貨</h4>
                            <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">
                            <h4>已取消</h4>
                            <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">
                            <h4>已收貨</h4>
                            <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">
                            <h4>已評價(jià)</h4>
                            <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">
                            <h4>好評率</h4>
                            <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;

      //訂單統(tǒng)計(jì)(正常情況下，此處應(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如何實(shí)現(xiàn)數(shù)據(jù)綁定

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

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

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

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

第二步：table數(shù)據(jù)展示，此處是賦值已知數(shù)據(jù)，開發(fā)當(dāng)中換成自己的數(shù)據(jù)，并給table定義一個(gè)點(diǎn)擊事件

 <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>

用來渲染的數(shù)據(jù)

<script type="text/html" id="demoDetail">
        <div>
            <div class="disF">
                <div class="flex1">
                    <div class="disF">
                        <label>姓名：</label>
                        <p class="flex1">{{d.username}}</p>
                    </div>
                </div>
                <div class="flex1">
                    <div class="disF">
                        <label>郵箱：</label>
                        <p class="flex1">{{d.email}}</p>
                    </div>
                </div>
                <div class="flex1">
                    <div class="disF">
                        <label>簽名：</label>
                        <p class="flex1">{{d.sign}}</p>
                    </div>
                </div>
            </div>
            <div class="disF">
                <div class="flex1">
                    <div class="disF">
                        <label>性別：</label>
                        <p class="flex1">{{d.sex}}</p>
                    </div>
                </div>
                <div class="flex1">
                    <div class="disF">
                        <label>城市：</label>
                        <p class="flex1">{{d.city}}</p>
                    </div>
                </div>
                <div class="flex1">
                    <div class="disF">
                        <label>積分：</label>
                        <p class="flex1">{{d.experience}}</p>
                    </div>
                </div>
            </div>
        </div>
    </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如何實(shí)現(xiàn)數(shù)據(jù)綁定

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

<p class="demoDetailp" style="display:none;padding:10px;">
        <p id="detailp"></p>
 </p>

第四步，點(diǎn)擊表格的“查看詳情”，通過laytpl實(shí)現(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如何實(shí)現(xiàn)數(shù)據(jù)綁定

看完了這篇文章，相信你對layui如何實(shí)現(xiàn)數(shù)據(jù)綁定有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：layui如何實(shí)現(xiàn)數(shù)據(jù)綁定
文章URL：http://chinadenli.net/article20/gsjhco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站維護(hù)、網(wǎng)站制作

廣告

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

微信小程序開發(fā)