How to implement data binding in layui

How layui implements data binding: first introduce layui's css file and js file; then create a view to present the rendering results; then write the template and use a script tag to store the template; finally render the template .

The operating environment of this tutorial: Windows 7 system, layui version 2.5.6. This article is applicable to all brands of computers.

Recommended: "layUI Tutorial"

Laytpl based on layui implements data binding

It took me a long time to remember the login password for my garden. You can imagine how long it has been since I logged in

Text
I used layui to make several management systems at the beginning, so it feels really comfortable to use. It’s easy to get started. The most commonly used ones in the management backend are form, table and pop-up window classes. The form table layer provided by layui is already very simple and easy to use. Regardless of the underlying encapsulation, I think the usage method shown to us is very simplified. In addition to the form table layer used in management, there are often some statistical data displays or content displays such as details pages. Then some used statistical data (except charts), such as text statistical data display. At this time, it is actually excellent to use layui based on laytpl to display this function. 　

##Write a simple data binding first

The first step: Introduce layui’s css file and js file (introduced by yourself) The second step: Create a view to present the rendering results. The code is as follows:

 3262c491acf61be61d182be423f59d4d        
 d2b64af1a3e8b557b4412ae296f54c5794b3e26ee717c64999d7867364b1b4a3       
94b3e26ee717c64999d7867364b1b4a3

Step 3: Write the template, use a script tag to store the template, the code is as follows:

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

Step 4: Render the template, the code is as follows:

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

Step 5: The effect is displayed as follows

Isn’t it very simple? Because a large number of backend systems are developed based on layui, if you encounter some data display types and do not want to use the traditional jquery binding method, it is actually very practical to use this.

Detailed data display

If it is a table, click to view the details, you can also display the data in this way

Step 1: Import The css files and js files of layui (introduced by yourself), and the css styles used in the page are written by yourself.

The second step: table data display, here is the assignment of known data, replace it with your own data during development, and define a click event for the table

 76ac5898f7f1524c193c1d6bf6eb650cf16b1740fad44fb09bfe928bcc527e08

  ab2236fcfcfe16c304f8c2d57daa0ee1      
   0a7dd54d7e3533e1c52178f97a60e0f5查看详情5db79b134e9f6b82c0b36e0489ee08ed
     2cacc6d41bbb37262a98f745aa00fbf0

Data used for rendering

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

The following is the assignment of 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
         }]
      });

table page effect display

The third step is to create a pop-up for rendering detailed data Box

50cd917f6e24a8866fdb3f42a38a2c70
        b20259019cd177e8908ecad269f24d3794b3e26ee717c64999d7867364b1b4a3
 94b3e26ee717c64999d7867364b1b4a3

The fourth step is to click "View Details" of the table to implement data binding through laytpl. The code is as follows:

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;
              });
          }
      });

The display effect is as follows:

Summary:

The above is the simplest way to record data using laytpl.

The above is the detailed content of How to implement data binding in layui. For more information, please follow other related articles on the PHP Chinese website!