So implementieren Sie die Datenbindung in Laui

So implementiert Lauii die Datenbindung: Führen Sie zuerst die CSS-Datei und die JS-Datei von Laui ein. Erstellen Sie dann eine Ansicht, um die Rendering-Ergebnisse darzustellen. Verwenden Sie dann ein Skript-Tag, um die Vorlage zu speichern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Laui-Version 2.5.6. Dieser Artikel gilt für alle Computermarken.

Empfehlung: „layUI-Tutorial“

Implementierung der Datenbindung basierend auf Lauis Laytpl

Es hat lange gedauert, bis ich mich an das Login-Passwort für meinen Garten erinnert habe. Sie können sich vorstellen, wie lange es her ist, seit ich mich angemeldet habe.

Text
Zu Beginn habe ich Laui verwendet, um mehrere Verwaltungssysteme zu erstellen, sodass der Einstieg im Verwaltungs-Backend wirklich einfach ist sind die Kategorie „Formular“, „Tabelle“ und „Popup-Fenster“. Die von Lauii bereitgestellte Formulartabellenebene ist bereits sehr einfach und benutzerfreundlich. Unabhängig von der zugrunde liegenden Kapselung halte ich die uns gezeigte Verwendungsmethode für sehr vereinfacht. Zusätzlich zur Formulartabellenebene verfügt die Verwaltung häufig über eine Anzeige statistischer Daten oder eine Inhaltsanzeige, z. B. eine Detailseite. Dann werden einige statistische Daten verwendet (außer Diagramme), z. B. die Anzeige statistischer Textdaten. Derzeit ist es tatsächlich hervorragend, Lauii basierend auf Laytpl zu verwenden, um diese Funktion anzuzeigen. 　

Schreiben Sie zunächst eine einfache Datenbindung

Schritt 1: Stellen Sie Lauis CSS-Datei und JS-Datei vor (von Ihnen selbst eingeführt)
Schritt 2: Ansicht erstellen, gewohnt Aktuelle Rendering-Ergebnisse, der Code lautet wie folgt:

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

Schritt 3: Schreiben Sie die Vorlage, verwenden Sie ein Skript-Tag, um die Vorlage zu speichern, der Code lautet wie folgt:

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

Schritt 4: Rendern Sie die Vorlage, der Code lautet wie folgt:

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

Schritt 5: Der Effekt wird wie folgt angezeigt

Ist das nicht ganz einfach? Da eine große Anzahl von Backend-Systemen auf Basis von Laui entwickelt wird, ist es tatsächlich sehr praktisch, diese zu verwenden, wenn Sie auf einige Datenanzeigetypen stoßen und nicht die herkömmliche JQuery-Bindungsmethode verwenden möchten.

Detaillierte Datenanzeige

Wenn es sich um eine Tabelle handelt, klicken Sie, um die Details anzuzeigen. Sie können die Daten auch auf diese Weise anzeigen

Schritt 1: Stellen Sie die CSS-Datei und die JS-Datei (selbst eingeführt) von Laui vor Auf der Seite verwendet Der CSS-Stil wurde von Ihnen selbst geschrieben.

Zweiter Schritt: Anzeige der Tabellendaten. Ersetzen Sie diese während der Entwicklung durch Ihre eigenen Daten und definieren Sie ein Klickereignis für die Tabelle Der Tabellenseiteneffekt wird angezeigt überlaytpl. Der Code lautet wie folgt:

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

Der Anzeigeeffekt ist wie folgt:

Zusammenfassung:

Das Obige ist die einfachste Möglichkeit, einige Daten mitlaytpl aufzuzeichnen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Datenbindung in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!