如何基于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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
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
PHP批量生成缩略图的代码
2008/07/19 PHP
php array_walk() 数组函数
2011/07/12 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
JavaScript版代码高亮
2006/06/26 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python获取豆瓣电影简介代码分享
2014/01/16 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
详解python如何引用包package
2020/06/07 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
幼儿教师研修感言
2014/02/12 职场文书
大学生秋游活动方案
2014/02/17 职场文书
刑事起诉书范文
2015/05/19 职场文书
第一节英语课开场白
2015/06/01 职场文书
大学新生入学感想
2015/08/07 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书