如何基于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 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
JavaScript实现拖拽功能
Feb 11 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读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python3实现点餐系统
2019/01/24 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
教师自荐信
2013/12/10 职场文书
自主招生推荐信范文
2014/05/10 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
教师个人事迹材料
2014/12/17 职场文书
土建技术员岗位职责
2015/04/11 职场文书
房产证明范本
2015/06/19 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP