Layui에서 데이터 바인딩을 구현하는 방법
- 藏色散人원래의
- 2020-11-19 11:15:098363검색
layui가 데이터 바인딩을 구현하는 방법: 먼저layui의 css 파일과 js 파일을 도입한 다음 렌더링 결과를 표시하는 뷰를 만든 다음 템플릿을 작성하고 스크립트 태그를 사용하여 템플릿을 최종적으로 렌더링합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 2.5.6 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.
추천: "layUI 튜토리얼"
layui의laytpl을 기반으로 한 데이터 바인딩 구현
정원의 로그인 비밀번호를 기억하는 데 오랜 시간이 걸렸습니다. 로그인한 지 얼마나 됐는지 짐작이 가실 겁니다
Text
Layui를 사용하여 처음에는 여러 관리 시스템을 만들었기 때문에 시작하기가 정말 쉽습니다. 관리 백엔드에서 가장 많이 사용되는 시스템입니다. 폼, 테이블, 팝업창 카테고리입니다. layui에서 제공하는 폼 테이블 레이어는 이미 매우 간단하고 사용하기 쉽습니다. 기본 캡슐화에 관계없이 우리에게 보여지는 사용 방법은 매우 간단하다고 생각합니다. 관리에는 양식 테이블 레이어 외에도 세부 정보 페이지와 같은 일부 통계 데이터 표시 또는 콘텐츠 표시가 있는 경우가 많습니다. 그런 다음 일부는 텍스트 통계 데이터 표시와 같은 통계 데이터(차트 제외)를 사용했습니다. 이때 실제로 이 기능을 표시하려면laytpl 기반의layui를 사용하는 것이 좋습니다.
먼저 간단한 데이터 바인딩 작성
1단계:layui의 css 파일과 js 파일 소개(직접 소개)
Step 2: 뷰 생성(예: 현재 렌더링 결과의 코드는 다음과 같습니다.
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단계: 효과는 다음과 같이 표시됩니다
아주 간단하지 않나요? 수많은 백엔드 시스템이layui를 기반으로 개발되기 때문에 일부 데이터 표시 유형이 발생하고 기존 jquery 바인딩 방법을 사용하고 싶지 않은 경우 실제로 이것을 사용하는 것이 매우 실용적입니다.
자세한 데이터 표시
테이블인 경우 클릭하여 세부정보를 볼 수 있으며, 이렇게 데이터를 표시할 수도 있습니다.
1단계:layui의 css 파일과 js 파일(자체 소개)을 소개합니다. 페이지에서 사용되는 CSS 스타일은 직접 작성했습니다.
두 번째 단계: 테이블 데이터 표시입니다. 개발 중에 이를 자체 데이터로 바꾸고 테이블에 대한 클릭 이벤트를 정의합니다.
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>다음은 할당입니다. of the table
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 94b3e26ee717c64999d7867364b1b4a3
네 번째 단계는 테이블의 "세부 정보 보기"를 클릭하여 데이터 바인딩을 구현하는 것입니다. 코드는 다음과 같습니다.
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을 사용하여 일부 데이터를 기록하는 가장 간단한 방법입니다.
위 내용은 Layui에서 데이터 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!