layui がデータ バインディングを実装する方法: まず、layui の css ファイルと js ファイルを導入し、次にレンダリング結果を表示するビューを作成し、次にテンプレートを記述し、script タグを使用してテンプレートを保存し、最後にテンプレートをレンダリングします。
このチュートリアルの動作環境: Windows 7 システム、layui バージョン 2.5.6。この記事はすべてのブランドのコンピューターに適用されます。
推奨: 「layUI チュートリアル 」
layui に基づく Laytpl はデータ バインディングを実装します
自分の庭のログインパスワードを思い出すのに長い時間がかかりました。ログインしてからどのくらい時間が経ったか想像してください。
テキスト
最初はlayuiを使っていくつかの管理システムを作成したので、本当に感じています管理バックエンドで最も一般的に使用されるクラスは、フォーム、テーブル、ポップアップ ウィンドウ クラスです。 lauiui が提供するフォームテーブルレイヤーはすでに非常にシンプルで使いやすく、基盤となるカプセル化に関係なく、使用方法が非常に簡素化されていると思います。 管理で使用されるフォーム テーブル レイヤーに加えて、統計データの表示や詳細ページなどのコンテンツの表示がよくあります。次に、テキスト統計データの表示など、統計データ (グラフを除く) を使用するものもありました。このとき、laytplベースのlayuiを使ってこの機能を表示すると実は優れています。
##最初に簡単なデータ バインディングを作成します
第一ステップ:layui の css ファイルと js ファイルを導入します (自分で導入) 第二ステップ:レンダリング結果を表示するビューを作成します。コードは次のとおりです。次のように:
<p> </p><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 id="营业额">营业额</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 id="订单数">订单数</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 id="已发货">已发货</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 id="未发货">未发货</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 id="已取消">已取消</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 id="已收货">已收货</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 id="已评价">已评价</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 id="好评率">好评率</h3>
<p><cite style="font-size:24px;">{{d.favorableRate}}%</cite></p>
</a>
</li>
</ul>
</div>
</div>
</script> ステップ 4: レンダリングテンプレートのコードは次のとおりです。 <script>
layui.use(['laytpl'], 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('orderInfoDiv'); //视图 即上面的 <div id="orderInfoDiv">
laytpl(orderInfoTpl).render(data, function (html) { //渲染视图
orderInfoDiv.innerHTML = html;
});
})
</script>ステップ 5: 効果は次のように表示されます。
詳細データの表示
テーブルの場合は、クリックして詳細を表示します。この方法でデータを表示することもできますステップ 1 ：インポートlayui（自分で導入したもの）のcssファイルとjsファイル、ページ内で使用しているcssスタイルは自分で書いたものです。 2 番目のステップ: テーブル データの表示。ここでは既知のデータを割り当てます。開発中に独自のデータに置き換えて、テーブルのクリック イベントを定義します。 <script>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看详情
</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
}]
});テーブルページ効果の表示
<p> </p><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;
});
}
});表示効果は次のとおりです。次のとおりです:
以上がLauiuiでデータバインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか？Mar 18, 2025 pm 01:01 PMこの記事では、無限のスクロール、セットアップ、ベストプラクティス、パフォーマンスの最適化、および強化されたユーザーエクスペリエンスのカスタマイズをカバーするためにLayUIのフローモジュールを使用して説明します。
LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか？Mar 18, 2025 pm 01:00 PMこの記事では、LayUIの要素モジュールを使用して、タブ、アコーディオン、プログレスバーなどのUI要素を作成およびカスタマイズする方法を詳しく説明します。
LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか？Mar 18, 2025 pm 12:59 PMこの記事では、LayuiのCarouselモジュールのカスタマイズについて説明し、遷移効果、自動再生設定、カスタムナビゲーションコントロールの追加など、外観と行動のためのCSSとJavaScriptの変更に焦点を当てています。
LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか？Mar 18, 2025 pm 12:58 PMこの記事では、LayuiのCarouselモジュールを画像スライダーに使用し、セットアップの手順、カスタマイズオプションの実装、自動再生とナビゲーションの実装、およびパフォーマンス最適化戦略についてガイドします。
ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか？Mar 18, 2025 pm 12:57 PMこの記事では、LayUIのアップロードモジュールの設定を、受け入れ、ext、サイズのプロパティを使用してファイルの種類とサイズを制限し、違反のエラーメッセージをカスタマイズすることについて説明します。
LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか？Mar 18, 2025 pm 12:46 PMこの記事では、LayUIのレイヤーモジュールを使用してモーダルウィンドウとダイアログボックスを作成する方法、セットアップ、タイプ、カスタマイズ、および避けるべき一般的な落とし穴の詳細について説明します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
