Comment implémenter la liaison de données dans layui-Tutoriel Layui-php.cn

La méthode permettant à layingui d'implémenter la liaison de données : introduisez d'abord le fichier css et le fichier js de layui ; puis créez une vue pour présenter les résultats du rendu, puis écrivez le modèle et utilisez une balise de script pour stocker le modèle ; enfin rendre le modèle.

Comment implémenter la liaison de données dans layui

L'environnement d'exploitation de ce tutoriel : système Windows 7, layui version 2.5.6 Cet article est applicable à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel layUI"

Laytpl basé sur layui implémente la liaison de données

Il m'a fallu beaucoup de temps pour me souvenir du mot de passe de connexion à mon jardin. Comme vous pouvez l'imaginer, cela fait longtemps que je ne me suis pas connecté.

Texte
J'ai utilisé layui pour faire plusieurs systèmes de gestion au début, donc c'est vraiment confortable à utiliser. Il est facile de démarrer. Les classes les plus couramment utilisées dans le backend de gestion sont les classes de formulaires, de tables et de fenêtres contextuelles. La couche de table de formulaire fournie par layui est déjà très simple et facile à utiliser. Quelle que soit l'encapsulation sous-jacente, je pense que la méthode d'utilisation qui nous est présentée est très simplifiée. En plus de la couche de table de formulaire, la direction dispose souvent d'un affichage de données statistiques ou d'un affichage de contenu tel qu'une page de détails. Ensuite, certains ont utilisé des données statistiques (à l'exception des graphiques), telles que l'affichage de données statistiques textuelles. À l’heure actuelle, il est en fait excellent d’utiliser layui basé sur laytpl pour afficher cette fonction.

Écrivez d'abord une simple liaison de données

Étape 1 : Présentez le fichier css et le fichier js de layui (introduits par vous-même)
Étape 2 : Créez une vue pour présenter les résultats du rendu Le code est tel. suit :

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

Copier après la connexion

Étape 3 : Écrivez le modèle, utilisez une balise de script pour stocker le modèle, le code est le suivant :

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

Copier après la connexion

Étape 4 : Rendre le modèle , le code est le suivant :

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

Copier après la connexion

Étape 5 : L'effet est affiché comme suit

N'est-ce pas très simple. Étant donné qu'un grand nombre de systèmes backend sont développés sur la base de layui, si vous rencontrez certains types d'affichage de données et ne souhaitez pas utiliser la méthode de liaison jquery traditionnelle, il est en fait très pratique de l'utiliser.

Affichage détaillé des données

S'il s'agit d'un tableau, cliquez pour voir les détails, vous pouvez également afficher les données de cette manière

Étape 1 : Importer Les fichiers css et js de layui (introduits par vous-même) et les styles css utilisés dans la page sont écrits par vous-même.

La deuxième étape : affichage des données du tableau, voici l'affectation des données connues, remplacez-les par vos propres données lors du développement, et définissez un événement clic pour le tableau

 <table class="layui-hide" lay-filter="demoTableFilter" id="demoTable"></table>

Copier après la connexion

  <script type="text/html" id="barDemo">      
   <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
     </script>

Copier après la connexion

Données utilisées pour le rendu

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

Copier après la connexion

Ce qui suit est l'affectation du tableau

table.render({
          elem: &#39;#demoTable&#39;
        , cols: [[ //标题栏
            { field: &#39;id&#39;, title: &#39;ID&#39;, width: 100 }
            , { field: &#39;username&#39;, title: &#39;用户名&#39;, width: 80 }
            , { field: &#39;email&#39;, title: &#39;邮箱&#39;, width: 180 }
            , { field: &#39;sign&#39;, title: &#39;签名&#39;, width: 180 }
            , { field: &#39;sex&#39;, title: &#39;性别&#39;, width: 80 }
            , { field: &#39;city&#39;, title: &#39;城市&#39;, width: 100 }
            , { field: &#39;experience&#39;, title: &#39;积分&#39;, minWidth: 80 }
            , {  width: 100, align: &#39;center&#39;, toolbar: &#39;#barDemo&#39; }
        ]]
        , 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
         }]
      });

Copier après la connexion

Affichage de l'effet de page de tableau

La troisième étape consiste à créer une pop-up pour le rendu des données détaillées Box

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

Copier après la connexion

La quatrième étape consiste à cliquer sur "Afficher les détails" du tableau pour implémenter la liaison de données via laytpl Le code est le suivant :

table.on(&#39;tool(demoTableFilter)&#39;, function (obj) {
          var data = obj.data;
          if (obj.event === &#39;detail&#39;) {
              index = layer.open({
                  title: &#39;查看详情&#39;,
                  type: 1,
                  move: false,
                  content: $(&#39;.demoDetailDiv&#39;),
                  area: [&#39;750px&#39;, &#39;300px&#39;],
                  resize: false,
                  scrollbar: false
              });
              var demoDetailTpl = demoDetail.innerHTML  //获取模板，
                , detailDiv = document.getElementById(&#39;detailDiv&#39;);  //视图
                laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图
                    detailDiv.innerHTML = html;
              });
          }
      });

Copier après la connexion

L'effet d'affichage est le suivant. suit :