ホームページ >ウェブフロントエンド >ライユイのチュートリアル >レイウイテーブルに写真を表示する方法
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:'ban_img',title: '图片',templet:'<div><img src="{{ d.ban_img }}" alt="レイウイテーブルに写真を表示する方法" ></div>'} ,{field:'ban_content', title: '备注'} ,{field:'ban_href', title: '地址'} ]] }); });
注: ここで注意する必要があるのは、テンプレートが追加されていることです。ここでは、フォーム要素とその他のテンプレートが追加されています。詳細については、
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 サイトの他の関連記事を参照してください。