Je n'y ai pas prêté attention. Quelqu'un a posé une question à ce sujet aujourd'hui, alors enregistrez-le.
Le formulaire layui est très simple à utiliser, le document layui est très détaillé, le code est directement en dessous
1. code jsp
<div class="demoTable">
<button class="layui-btn" data-type="publish">发布Banner</button>
</div>
<table class="layui-hide" id="banner"></table>
2. Ensuite, le code 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: '地址'}
]]
});
});Remarque : La chose à noter ici est que le templet a été ajouté, et voici l'ajout de modèles tels que des éléments de formulaire. Pour plus de détails, veuillez vous référer à: https://www.layui.com/doc/modules/table.html#templet
Où d représente les données renvoyées par le serveur et ban_img est le nom de champ correspondant aux données
Ce n'est pas suffisant, le suivant est la clé, car en ce moment votre table ressemble à ceci
Cette image ne s'affiche pas du tout, elle peut être résolue comme ceci
<div class="demoTable">
<button class="layui-btn" data-type="publish">发布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>Comme vous pouvez le voir, j'ai ajouté un style en bas. Il y a un problème prioritaire ici, donc il faut le placer en bas. ! !
Mais l'effet actuel est le suivant:
Il semble que la hauteur soit bonne, mais qu'est-ce que c'est que cette largeur, donc je viens de F12
Il s'est avéré que layui définissait un tel style en interne, donc je ne dirai pas grand-chose, changez!
<style type="text/css">
.layui-table-cell{
text-align:center;
height: auto;
white-space: normal;
}
.layui-table img{
max-width:300px
}Après avoir ajouté le style img .layui-table, tout est fait, je viens de définir une taille fixe ici, vous pouvez vous sentir libre ~
L'effet final:
Les frères qui résolvent ou aiment les frères aiment louer! J'espère aider tout le monde
