ホームページ > 記事 > ウェブフロントエンド > Lauiuiでデータバインディングを実装する方法
Lauiuiでデータバインディングを実装する方法
- 藏色散人オリジナル
- 2020-11-19 11:15:098227ブラウズ
layui がデータ バインディングを実装する方法: まず、layui の css ファイルと js ファイルを導入し、次にレンダリング結果を表示するビューを作成し、次にテンプレートを記述し、script タグを使用してテンプレートを保存し、最後にテンプレートをレンダリングします。
このチュートリアルの動作環境: Windows 7 システム、layui バージョン 2.5.6。この記事はすべてのブランドのコンピューターに適用されます。
推奨: 「layUI チュートリアル 」
layui に基づく Laytpl はデータ バインディングを実装します
自分の庭のログインパスワードを思い出すのに長い時間がかかりました。ログインしてからどのくらい時間が経ったか想像してください。
テキスト
最初はlayuiを使っていくつかの管理システムを作成したので、本当に感じています管理バックエンドで最も一般的に使用されるクラスは、フォーム、テーブル、ポップアップ ウィンドウ クラスです。 lauiui が提供するフォームテーブルレイヤーはすでに非常にシンプルで使いやすく、基盤となるカプセル化に関係なく、使用方法が非常に簡素化されていると思います。 管理で使用されるフォーム テーブル レイヤーに加えて、統計データの表示や詳細ページなどのコンテンツの表示がよくあります。次に、テキスト統計データの表示など、統計データ (グラフを除く) を使用するものもありました。このとき、laytplベースのlayuiを使ってこの機能を表示すると実は優れています。
##最初に簡単なデータ バインディングを作成します
第一ステップ:layui の css ファイルと js ファイルを導入します (自分で導入) 第二ステップ:レンダリング結果を表示するビューを作成します。コードは次のとおりです。次のように:
3262c491acf61be61d182be423f59d4d d2b64af1a3e8b557b4412ae296f54c5794b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3ステップ 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(['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 番目のステップ: テーブル データの表示。ここでは既知のデータを割り当てます。開発中に独自のデータに置き換えて、テーブルのクリック イベントを定義します。76ac5898f7f1524c193c1d6bf6eb650cf16b1740fad44fb09bfe928bcc527e08
ab2236fcfcfe16c304f8c2d57daa0ee1 0a7dd54d7e3533e1c52178f97a60e0f5查看详情5db79b134e9f6b82c0b36e0489ee08ed 2cacc6d41bbb37262a98f745aa00fbf0レンダリングに使用されるデータ
<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
}]
});テーブルページ効果の表示
50cd917f6e24a8866fdb3f42a38a2c70 b20259019cd177e8908ecad269f24d3794b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a34 番目のステップは、テーブルの [詳細の表示] をクリックして、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：レイウイテーブルに写真を表示する方法次の記事：レイウイテーブルに写真を表示する方法