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 相关文章推荐
JQuery筛选器全系列介绍
Aug 27 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
如何用Node写页面爬虫的工具集
Oct 26 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
MooTools 1.2介绍
2009/09/14 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
标准自荐信范文
2014/01/29 职场文书
搞笑获奖感言
2014/01/30 职场文书
三年级学生评语
2014/04/23 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
员工评语范文
2014/12/31 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL