layuiAdmin循环遍历展示商品图片列表的方法


Posted in Javascript onSeptember 16, 2019

主页面内容

<div class="layui-fluid layadmin-cmdlist-fluid">

  <script id="demo2" type="text/html">

   <div class="layui-col-md2 layui-col-sm4">
    <div class="cmdlist-container">
     <a lay-href="/books/add" rel="external nofollow" >
      <img src="{{ layui.setter.base }}style/res/template/portrait.png">
     </a>
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" >
      <div class="cmdlist-text">
       <p class="info">新增</p>
      </div>
     </a>
    </div>
   </div>

    {{# layui.each(d.list, function(index, item){ }}
     <div class="layui-col-md2 layui-col-sm4">
      <div class="cmdlist-container">

       {{# if(item.cover_img == ""){ }}
        <a lay-href="/books/edit/bookId_edit={{ item.book_serial_num }}" rel="external nofollow" rel="external nofollow" >
         <img src="{{ layui.setter.base }}style/book/default.jpg">
        </a>
       {{# } else { }}
        <a lay-href="/books/edit/bookId_edit={{ item.book_serial_num }}" rel="external nofollow" rel="external nofollow" >
         <img src="{{ item.cover_img }}">
        </a>
       {{# } }}

       <a href="javascript:;" rel="external nofollow" rel="external nofollow" >
        <div class="cmdlist-text">
         <p class="info">{{item.main_title}}</p>
         <div class="price">
          <b>{{item.strSignStatus}}</b>
         </div>
        </div>
       </a>
      </div>
     </div>
    {{# }); }}
    {{# if(d.list.length === 0){ }}
    无数据
    {{# } }}
  </script>
 <div id="view" class="layui-row layui-col-space30"></div>
</div>

发送ajax填充动态数据

var data = {}

 admin.req({
  url: "/books/booklist"
  ,success: function(res){
   data = res.data;
   var getTpl = demo2.innerHTML
    ,view = document.getElementById('view');
   laytpl(getTpl).render(data, function(html){
    view.innerHTML = html;
   });
  }
 })

注:主页面中a标签的lay-href属性 请求不刷新页面 如果需要请求过去每次刷新页面 需改成

<a href="./#/books/add" rel="external nofollow" >

前面加 ./#

以上这篇layuiAdmin循环遍历展示商品图片列表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 #Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 #Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 #Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 #Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 #Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 #Javascript
js实现无限瀑布流实例方法
Sep 16 #Javascript
You might like
php 读取文件乱码问题
2010/02/20 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
js验证表单第二部分
2006/11/25 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python编写分类决策树的代码
2017/12/21 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python中rc1什么意思
2020/06/19 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
三维科技面试题
2013/07/27 面试题
自荐信封面
2013/12/04 职场文书
行政人员工作职责
2013/12/05 职场文书
会计专业自荐信
2014/06/03 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
神龙架导游词
2015/02/11 职场文书