Layui에서 데이터 바인딩을 구현하는 방법

layui가 데이터 바인딩을 구현하는 방법: 먼저layui의 css 파일과 js 파일을 도입한 다음 렌더링 결과를 표시하는 뷰를 만든 다음 템플릿을 작성하고 스크립트 태그를 사용하여 템플릿을 최종적으로 렌더링합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 2.5.6 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

추천: "layUI 튜토리얼"

layui의laytpl을 기반으로 한 데이터 바인딩 구현

정원의 로그인 비밀번호를 기억하는 데 오랜 시간이 걸렸습니다. 로그인한 지 얼마나 됐는지 짐작이 가실 겁니다

Text
Layui를 사용하여 처음에는 여러 관리 시스템을 만들었기 때문에 시작하기가 정말 쉽습니다. 관리 백엔드에서 가장 많이 사용되는 시스템입니다. 폼, 테이블, 팝업창 카테고리입니다. layui에서 제공하는 폼 테이블 레이어는 이미 매우 간단하고 사용하기 쉽습니다. 기본 캡슐화에 관계없이 우리에게 보여지는 사용 방법은 매우 간단하다고 생각합니다. 관리에는 양식 테이블 레이어 외에도 세부 정보 페이지와 같은 일부 통계 데이터 표시 또는 콘텐츠 표시가 있는 경우가 많습니다. 그런 다음 일부는 텍스트 통계 데이터 표시와 같은 통계 데이터(차트 제외)를 사용했습니다. 이때 실제로 이 기능을 표시하려면laytpl 기반의layui를 사용하는 것이 좋습니다. 　

먼저 간단한 데이터 바인딩 작성

1단계:layui의 css 파일과 js 파일 소개(직접 소개)
Step 2: 뷰 생성(예: 현재 렌더링 결과의 코드는 다음과 같습니다.

 <p class="layui-row">        
 <p class="layui-col-md6" id="orderInfop"></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>营业额</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([&#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>

5단계: 효과는 다음과 같이 표시됩니다

아주 간단하지 않나요? 수많은 백엔드 시스템이layui를 기반으로 개발되기 때문에 일부 데이터 표시 유형이 발생하고 기존 jquery 바인딩 방법을 사용하고 싶지 않은 경우 실제로 이것을 사용하는 것이 매우 실용적입니다.

자세한 데이터 표시

테이블인 경우 클릭하여 세부정보를 볼 수 있으며, 이렇게 데이터를 표시할 수도 있습니다.

1단계:layui의 css 파일과 js 파일(자체 소개)을 소개합니다. 페이지에서 사용되는 CSS 스타일은 직접 작성했습니다.

두 번째 단계: 테이블 데이터 표시입니다. 개발 중에 이를 자체 데이터로 바꾸고 테이블에 대한 클릭 이벤트를 정의합니다.

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

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

다음은 할당입니다. 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
         }]
      });

테이블 페이지 효과 표시

세 번째 단계는 세부 데이터 렌더링을 위한 팝업 상자를 만드는 것입니다.

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

네 번째 단계는 테이블의 "세부 정보 보기"를 클릭하여 데이터 바인딩을 구현하는 것입니다. 코드는 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!