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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
uni-app 支持多端第三方地图定位的方法
Jan 03 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/10/12 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
Python实现简单查找最长子串功能示例
2019/02/26 Python
python实现对输入的密文加密
2019/03/20 Python
python 图片去噪的方法示例
2019/07/09 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python学习之os模块及用法
2020/06/03 Python
浅析Python的命名空间与作用域
2020/11/25 Python
vue+django实现下载文件的示例
2021/03/24 Vue.js
思想专业自荐信范文
2013/12/25 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
生态养殖创业计划书
2014/05/06 职场文书
党员领导干部承诺书
2014/05/28 职场文书
企业形象策划方案
2014/05/29 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
国王的演讲观后感
2015/06/03 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
SQL Server中使用表变量和临时表
2022/05/20 SQL Server