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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
Bootstrap布局方式详解
May 27 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
javascript验证form表单数据的案例详解
Mar 25 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP计数器的实现代码
2013/06/08 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python设计模式之工厂模式简单示例
2018/01/09 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python实现超级马里奥
2020/03/18 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
司机辞职报告范文
2014/01/20 职场文书
高中军训感言800字
2014/03/05 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
MySQL sql_mode的使用详解
2021/05/08 MySQL
Python编程编写完善的命令行工具
2021/09/15 Python