So zeigen Sie Bilder in der Laui-Tabelle an

Die Verwendung der Laui-Tabellen ist sehr einfach. Der Code ist direkt unten.

Wenn Sie mehr über Laui wissen möchten, können Sie dies tun Klicken Sie auf: layui-Tutorial

1. JSP-Code

<div class="demoTable">
   		<button class="layui-btn" data-type="publish">发布Banner</button>
	</div>
	<table class="layui-hide" id="banner"></table>

2

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:&#39;ban_img&#39;,title: &#39;图片&#39;,templet:&#39;<div><img  src="/static/imghwm/default1.png"  data-src="{{ d.ban_img }}"  class="lazy"    alt="So zeigen Sie Bilder in der Laui-Tabelle an" ></div>&#39;}
		    ,{field:&#39;ban_content&#39;, title: &#39;备注&#39;}
		    ,{field:&#39;ban_href&#39;, title: &#39;地址&#39;}
		 ]]
	});
});

Hinweis: Hier ist zu beachten, dass Vorlagen hinzugefügt werden, hier handelt es sich um Vorlagen wie Formularelemente. Einzelheiten finden Sie unter:

https://www.layui.com/doc/modules/table.html#templet

wobei This d die vom Server zurückgegebenen Daten darstellt, ban_img der Feldname ist, der den Daten entspricht

Das reicht nicht aus, das nächste ist der Schlüssel, denn in diesem Moment ist Ihre Tabelle sieht so aus

Dieses Bild wird überhaupt nicht vollständig angezeigt

<div class="demoTable">
   		<button class="layui-btn" data-type="publish">发布Banner</button>
	</div>
	<table class="layui-hide" id="banner"></table>
 

Sie können sehen, dass ich den Stil hinzugefügt habe Unten gibt es ein vorrangiges Problem, also muss es unten platziert werden, denken Sie daran! ! !

Aber der aktuelle Effekt ist so:

Es scheint, dass die Höhe besser ist, aber was zum Teufel ist diese Breite, also habe ich F12 gedrückt

Das ist es, Laui hat einen solchen Stil intern definiert, also ändern wir ihn ohne weiteres!

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

Nach dem Hinzufügen des

-Stils ist alles fertig. Ich habe hier nur eine feste Größe festgelegt, Sie können tun, was Sie wollen~.layui-table img

Endeffekt:

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in der Laui-Tabelle an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!