layui怎么实现数据绑定-Layui教程-PHP中文网

首页

web前端

Layui教程

layui怎么实现数据绑定

藏色散人

Nov 19, 2020 am 11:15 AM

layui

layui实现数据绑定的方法：首先引入layui的css文件和js文件；然后建立视图，用于呈现渲染结果；接着编写模版，使用一个script标签存放模板；最后渲染模版即可。

layui怎么实现数据绑定

本教程操作环境：Windows7系统、layui2.5.6版，本文适用于所有品牌的电脑。

推荐：《layUI教程》

基于layui的laytpl实现数据绑定

想了半天才想起自己园子的登录密码。可想而知，多长时间没登录了

正文
一开始用layui做了几个管理系统，所以用起来觉得确实很容易上手，管理后台最常用的就是form和table以及弹窗类。layui提供的form table layer已经是很简洁好用了，抛开底层的封装不说，给我们展现出来的使用方法我觉得是非常简化了。管理用到的除了form table layer之外，经常会有一些统计数据展示或者详情页这种内容展示。那么一些用到的统计数据（除图表），如文字统计型数据展示。这个时候，用layui的基于laytpl展现这种功能其实是极好的。　

先写一个简单的数据绑定

第一步：引入layui的css文件和js文件（自行引入）
第二步：建立视图，用于呈现渲染结果，代码如下：

 <p class="layui-row">        
 <p class="layui-col-md6" id="orderInfop"></p>       
</p>

登录后复制

第三步：编写模版，使用一个script标签存放模板，代码如下：

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

登录后复制

第四步：渲染模版，代码如下：

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

登录后复制

第五步：效果显示如下

是不是非常的简单呢。因为大量的后台系统都是基于layui开发的，遇到一些数据展示型的不想用传统的jquery绑定方式的话，用这个其实非常实用呢。

详情数据展示

如果是一个table，点击查看详情的话，也可以用这种方式展示数据

第一步：引入layui的css文件和js文件（自行引入），页面中用到的css样式自行编写。

第二步：table数据展示，此处是赋值已知数据，开发当中换成自己的数据，并给table定义一个点击事件

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

登录后复制

以下是table的赋值

table.render({
          elem: &#39;#demoTable&#39;
        , cols: [[ //标题栏
            { field: &#39;id&#39;, title: &#39;ID&#39;, width: 100 }
            , { field: &#39;username&#39;, title: &#39;用户名&#39;, width: 80 }
            , { field: &#39;email&#39;, title: &#39;邮箱&#39;, width: 180 }
            , { field: &#39;sign&#39;, title: &#39;签名&#39;, width: 180 }
            , { field: &#39;sex&#39;, title: &#39;性别&#39;, width: 80 }
            , { field: &#39;city&#39;, title: &#39;城市&#39;, width: 100 }
            , { field: &#39;experience&#39;, title: &#39;积分&#39;, minWidth: 80 }
            , {  width: 100, align: &#39;center&#39;, toolbar: &#39;#barDemo&#39; }
        ]]
        , 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页面效果展示

第三步，建立一个用来渲染详情数据的弹出框

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

登录后复制

第四步，点击表格的“查看详情”，通过laytpl实现数据绑定代码如下：

table.on(&#39;tool(demoTableFilter)&#39;, function (obj) {
          var data = obj.data;
          if (obj.event === &#39;detail&#39;) {
              index = layer.open({
                  title: &#39;查看详情&#39;,
                  type: 1,
                  move: false,
                  content: $(&#39;.demoDetailDiv&#39;),
                  area: [&#39;750px&#39;, &#39;300px&#39;],
                  resize: false,
                  scrollbar: false
              });
              var demoDetailTpl = demoDetail.innerHTML  //获取模板，
                , detailDiv = document.getElementById(&#39;detailDiv&#39;);  //视图
                laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图
                    detailDiv.innerHTML = html;
              });
          }
      });

登录后复制

显示效果如下：

总结：

以上是记录一点最简单的用laytpl渲染数据的方式。

以上是layui怎么实现数据绑定的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1674

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

layui怎么获取表单数据 Apr 04, 2024 am 03:39 AM

layui 提供了多种获取表单数据的方法，包括直接获取表单所有字段数据、获取单个表单元素值、使用 formAPI.getVal() 方法获取指定字段值、将表单数据序列化并作为 AJAX 请求参数，以及监听表单提交事件获取数据。

layui登陆页面怎么设置跳转 Apr 04, 2024 am 03:12 AM

layui 登录页面跳转设置步骤：添加跳转代码：在登录表单提交按钮点击事件中添加判断，成功登录后通过 window.location.href 跳转到指定页面。修改 form 配置：在 lay-filter="login" 的 form 元素中添加 hidden 输入字段，name 为 "redirect"，value 为目标页面地址。

layui跟vue有啥区别 Apr 04, 2024 am 03:54 AM

layui与Vue的区别主要体现在功能和关注点上。layui专注于快速开发UI元素，提供预制组件简化页面构建；而Vue是一个全栈框架，注重数据绑定、组件化开发和状态管理，更适合构建复杂应用程序。 layui学习简单，适合快速构建页面；Vue学习曲线陡峭，但有助于构建可扩展和易维护的应用程序。根据项目需求和开发者技能水平，可以选择合适的框架。

layui如何实现自适应 Apr 26, 2024 am 03:00 AM

通过使用layui框架的响应式布局功能，可以实现自适应布局。步骤包括：引用layui框架。定义自适应布局容器，设置layui-container类。使用响应式断点（xs/sm/md/lg）隐藏特定断点下的元素。利用网格系统（layui-col-）指定元素宽度。通过偏移量（layui-offset-）创建间距。使用响应式实用工具（layui-invisible/show/block/inline）控制元素的可见性和显示方式。

layui是什么意思啊 Apr 04, 2024 am 04:33 AM

layui是一个前端UI框架，它提供了丰富的UI组件、工具和功能，帮助开发人员快速构建现代化、响应式和交互式Web应用程序，特点包括：灵活轻量、模块化设计、丰富的组件、强大的工具和易于定制。它广泛应用于各种Web应用程序的开发中，包括管理系统、电商平台、内容管理系统、社交网络和移动端应用。

layui框架是什么语言 Apr 04, 2024 am 04:39 AM

layui框架是一款基于JavaScript的前端框架，提供了一套易用的UI组件和工具，帮助开发者快速构建响应式Web应用。其特点包括：模块化、轻量级、响应式，并拥有完善的文档和社区支持。layui广泛应用于管理后台系统、电商网站和移动端应用等开发中。优点在于上手快、提高效率、维护方便，缺点是定制性较差、技术更新较慢。