layui中怎么表格里顯示圖片

這篇文章給大家介紹layui中怎么表格里顯示圖片，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1、jsp代碼

<div class="demoTable">   <button class="layui-btn" data-type="publish">發(fā)布Banner</button></div><table class="layui-hide" id="banner"></table>

2、然后是js代碼

layui.use('table', function(){    var table = layui.table;  table.render({    elem: '#banner',url:'../banner/list',cols: [[     {field:'ban_id',width:20,title: 'ID', sort: true}            ,{field:'ban_img',title: '圖片',templet:'<div><img  src="{{ d.ban_img }}"></div>'}    ,{field:'ban_content', title: '備注'}    ,{field:'ban_href', title: '地址'} ]]});});

注意：這里需要注意的是，加入了templet，這里就是加入表單元素等模板

其中這個(gè)d代表的就是服務(wù)器返回的數(shù)據(jù)，ban_img是數(shù)據(jù)對應(yīng)的字段名

<div class="demoTable">   <button class="layui-btn" data-type="publish">發(fā)布Banner</button></div><table class="layui-hide" id="banner"></table> <style type="text/css">    .layui-table-cell{    text-align:center;    height: auto;    white-space: normal;    }</style>

可以看到我在底部加上了樣式，這里有優(yōu)先級的問題，所以必須是放在最下面，謹(jǐn)記?。?！

原來如此，layui內(nèi)部定義了這么一個(gè)樣式，所以話不多說，改！

<style type="text/css">.layui-table-cell{text-align:center;height: auto;white-space: normal;}.layui-table img{max-width:300px}

關(guān)于layui中怎么表格里顯示圖片就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。