layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
更新時(shí)間：2019年09月16日 09:32:33 作者：My_Way666
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
主頁(yè)面內(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填充動(dòng)態(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;
});
}
})
注：主頁(yè)面中a標(biāo)簽的lay-href屬性 請(qǐng)求不刷新頁(yè)面 如果需要請(qǐng)求過去每次刷新頁(yè)面 需改成
<a href="./#/books/add" rel="external nofollow" >
前面加 ./#
以上這篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解JavaScript什么情況下不建議使用箭頭函數(shù)
箭頭函數(shù)作為ES6新增的語法，在使用時(shí)不僅能使得代碼更加簡(jiǎn)潔，而且在某些場(chǎng)景避免this指向問題。但是箭頭函數(shù)不是萬能的，也有自己的缺點(diǎn)以及不適用的場(chǎng)景，本文總結(jié)了JavaScript什么情況下不建議使用箭頭函數(shù)，感興趣的可以了解一下2022-06-06
聊聊那些使用前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫(kù)
本文介紹了前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類庫(kù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
通過js獲取select(多選下拉)中所選值，具體實(shí)現(xiàn)如下，有需要的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
js的隱含參數(shù)(arguments,callee,caller)使用方法
本篇文章只要是對(duì)js的隱含參數(shù)(arguments,callee,caller)使用方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家介紹了JavaScript函數(shù)柯里化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
原生js實(shí)現(xiàn)trigger方法示例代碼
這篇文章主要給大家介紹了關(guān)于利用原生js實(shí)現(xiàn)trigger方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序中不同頁(yè)面?zhèn)鬟f參數(shù)的操作方法
這篇文章主要介紹了微信小程序中不同頁(yè)面?zhèn)鬟f參數(shù)的操作方法,在開發(fā)項(xiàng)目中,避免不了不同頁(yè)面之間傳遞數(shù)據(jù)等,那么就需要進(jìn)行不同頁(yè)面之間的一個(gè)數(shù)據(jù)傳遞的,需要的朋友可以參考下2023-12-12
javascript設(shè)計(jì)模式 – 命令模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 命令模式,結(jié)合實(shí)例形式分析了javascript命令模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04