layuiAdmin循环遍历展示商品图片列表的方法

主页面内容

<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循环遍历展示商品图片列表的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。