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 相关文章推荐
document.createElement()用法
Mar 13 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
开启PHP的伪静态模式
2015/12/31 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python探索之pLSA实现代码
2017/10/25 Python
python 自定义对象的打印方法
2019/01/12 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
学生档案自我鉴定
2013/10/07 职场文书
经典促销广告词大全
2014/03/19 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
超级礼物观后感
2015/06/15 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript
Nginx HTTP跳转至HTTPS
2022/05/15 Servers