如何基于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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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实现字符串首字母转换成大写的方法
2015/03/17 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
一名老师的自我评价
2014/02/07 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript