レイウイテーブルに写真を表示する方法

layui のテーブルの使用法はまだ非常に簡単です。layui ドキュメントは非常に詳細です。コードはそのすぐ下にあります。

layui について詳しく知りたい場合は、次をクリックできます: layuitutorial

1、jsp code

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

2、そして js code

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="レイウイテーブルに写真を表示する方法" ></div>&#39;}
		    ,{field:&#39;ban_content&#39;, title: &#39;备注&#39;}
		    ,{field:&#39;ban_href&#39;, title: &#39;地址&#39;}
		 ]]
	});
});

注: ここで注意する必要があるのは、テンプレートが追加されていることです。ここでは、フォーム要素とその他のテンプレートが追加されています。詳細については、

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

を参照してください。 その中で、この d はサーバーから返されたデータを表します。ban_img はデータに対応するフィールド名です。

これだけでは十分ではありません。次が重要です。表は次のようになります

この図は完全に表示されていません。次のように解決できます。

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

次の場所にスタイルを追加したことがわかります。ここには優先順位の高い問題があるので、必ず最後に配置されています。覚えておいてください。 ！ ！

しかし、現在の効果は次のとおりです:

高さの方が優れているように見えますが、この幅は一体何なのかということで、F12#を押しました

##これで終わりです。layui にはそのようなスタイルが内部的に定義されているので、これ以上苦労することなく、それを変更してみましょう。

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

.layui-table img スタイルを追加したら、すべてが完了しました。ここでは固定サイズを設定するだけなので、必要に応じて自由に設定できます~

最終効果:

以上がレイウイテーブルに写真を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。