Lauiuiでデータバインディングを実装する方法

layui がデータ バインディングを実装する方法: まず、layui の css ファイルと js ファイルを導入し、次にレンダリング結果を表示するビューを作成し、次にテンプレートを記述し、script タグを使用してテンプレートを保存し、最後にテンプレートをレンダリングします。

このチュートリアルの動作環境: Windows 7 システム、layui バージョン 2.5.6。この記事はすべてのブランドのコンピューターに適用されます。

推奨: 「layUI チュートリアル 」

layui に基づく Laytpl はデータ バインディングを実装します

自分の庭のログインパスワードを思い出すのに長い時間がかかりました。ログインしてからどのくらい時間が経ったか想像してください。

テキスト
最初はlayuiを使っていくつかの管理システムを作成したので、本当に感じています管理バックエンドで最も一般的に使用されるクラスは、フォーム、テーブル、ポップアップ ウィンドウ クラスです。 lauiui が提供するフォームテーブルレイヤーはすでに非常にシンプルで使いやすく、基盤となるカプセル化に関係なく、使用方法が非常に簡素化されていると思います。 管理で使用されるフォーム テーブル レイヤーに加えて、統計データの表示や詳細ページなどのコンテンツの表示がよくあります。次に、テキスト統計データの表示など、統計データ (グラフを除く) を使用するものもありました。このとき、laytplベースのlayuiを使ってこの機能を表示すると実は優れています。

##最初に簡単なデータ バインディングを作成します

第一ステップ:layui の css ファイルと js ファイルを導入します (自分で導入) 第二ステップ:レンダリング結果を表示するビューを作成します。コードは次のとおりです。次のように:

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

ステップ 3: テンプレートを作成し、スクリプト タグを使用してテンプレートを保存します。コードは次のとおりです:

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

ステップ 4: レンダリングテンプレートのコードは次のとおりです。

<script>
  layui.use([&#39;laytpl&#39;], 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(&#39;orderInfoDiv&#39;);  //视图 即上面的 <div id="orderInfoDiv">
      laytpl(orderInfoTpl).render(data, function (html) { //渲染视图
          orderInfoDiv.innerHTML = html;
      });
  　　})
 </script>

ステップ 5: 効果は次のように表示されます。

非常に簡単ではありませんか?多くのバックエンド システムはlayuiに基づいて開発されているため、一部のデータ表示タイプに遭遇し、従来のjqueryバインド方法を使用したくない場合は、これを使用するのが実際には非常に実用的です。

詳細データの表示

テーブルの場合は、クリックして詳細を表示します。この方法でデータを表示することもできます

ステップ 1 ：インポートlayui（自分で導入したもの）のcssファイルとjsファイル、ページ内で使用しているcssスタイルは自分で書いたものです。

2 番目のステップ: テーブル データの表示。ここでは既知のデータを割り当てます。開発中に独自のデータに置き換えて、テーブルのクリック イベントを定義します。

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

レンダリングに使用されるデータ

<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.render({
          elem: '#demoTable'
        , cols: [[ //标题栏
            { 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
         }]
      });

テーブルページ効果の表示

3番目のステップはポップアップを作成することです詳細データ ボックスをレンダリングするためのボックス

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

4 番目のステップは、テーブルの [詳細の表示] をクリックして、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 を使用してデータを記録する最も簡単な方法です。

以上がLauiuiでデータバインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。