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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
js闭包的用途详解
Nov 09 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
vue 中directive功能的简单实现
Jan 05 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
微信小程序登录session的使用
Mar 17 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
vue实现虚拟列表功能的代码
Jul 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设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP代码加密的方法总结
2020/03/13 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python中setuptools的作用是什么
2020/06/19 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
英文求职信写作小建议
2014/02/16 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android