layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
更新時間:2019年09月16日 09:32:33 作者:My_Way666
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
主頁面內(nèi)容
<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){ }} 無數(shù)據(jù) {{# } }} </script> <div id="view" class="layui-row layui-col-space30"></div> </div>
發(fā)送ajax填充動態(tài)數(shù)據(jù)
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循環(huán)遍歷展示商品圖片列表的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08詳解JavaScript什么情況下不建議使用箭頭函數(shù)
箭頭函數(shù)作為ES6新增的語法,在使用時不僅能使得代碼更加簡潔,而且在某些場景避免this指向問題。但是箭頭函數(shù)不是萬能的,也有自己的缺點以及不適用的場景,本文總結了JavaScript什么情況下不建議使用箭頭函數(shù),感興趣的可以了解一下2022-06-06聊聊那些使用前端Javascript實現(xiàn)的機器學習類庫
本文介紹了前端Javascript實現(xiàn)的機器學習類庫,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09js的隱含參數(shù)(arguments,callee,caller)使用方法
本篇文章只要是對js的隱含參數(shù)(arguments,callee,caller)使用方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法
這篇文章主要介紹了微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法,在開發(fā)項目中,避免不了不同頁面之間傳遞數(shù)據(jù)等,那么就需要進行不同頁面之間的一個數(shù)據(jù)傳遞的,需要的朋友可以參考下2023-12-12javascript設計模式 – 命令模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 命令模式,結合實例形式分析了javascript命令模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04