如何基于layui的laytpl实现数据绑定的示例代码


Posted in Javascript onApril 10, 2020

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

正文

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

先写一个简单的数据绑定

第一步:引入layui的css文件和js文件(自行引入)
第二步:建立视图,用于呈现渲染结果,代码如下:

<div class="layui-row">
    <div class="layui-col-md6" id="orderInfoDiv"></div>    
</div>

第三步:编写模版,使用一个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(['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>

第五步:效果显示如下

如何基于layui的laytpl实现数据绑定的示例代码

是不是非常的简单呢。因为大量的后台系统都是基于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>

以下是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页面效果展示

如何基于layui的laytpl实现数据绑定的示例代码

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

<div class="demoDetailDiv" style="display:none;padding:10px;">
    <div id="detailDiv"></div>
 </div>

第四步,点击表格的“查看详情”,通过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;
       });
     } 
   });

显示效果如下:

如何基于layui的laytpl实现数据绑定的示例代码

总结:

以上是记录一点最简单的用laytpl渲染数据的方式。到此这篇关于如何基于layui的laytpl实现数据绑定的示例代码的文章就介绍到这了,更多相关layui laytpl 数据绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php注册登录系统简化版
2020/12/28 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python回调函数用法实例分析
2015/05/09 Python
python类和继承用法实例
2015/07/07 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python3实现弹弹球小游戏
2019/11/25 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
公司寄语大全
2014/04/10 职场文书
节约用电标语
2014/06/17 职场文书
会员活动策划方案
2014/08/19 职场文书
逃课检讨书
2015/01/26 职场文书
门店店长岗位职责
2015/04/14 职场文书
django上传文件的三种方式
2021/04/29 Python
python playwrigh框架入门安装使用
2022/07/23 Python