ホームページ  >  記事  >  ウェブフロントエンド  >  レイウイテーブルに写真を表示する方法

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

angryTom
angryTomオリジナル
2019-08-01 09:23:2316189ブラウズ

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

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(&#39;table&#39;, function(){
    var table = layui.table;
		  
	table.render({
	    elem: &#39;#banner&#39;
		,url:&#39;../banner/list&#39;
		,cols: [[
		     {field:&#39;ban_id&#39;,width:20,title: &#39;ID&#39;, sort: true}
	            ,{field:&#39;ban_img&#39;,title: &#39;图片&#39;,templet:&#39;<div><img   src="{{ d.ban_img }}" 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。