layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了

1、jsp代码

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

2、然后是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: '地址'}
		 ]]
	});
});

注意:这里需要注意的是,加入了templet,这里就是加入表单元素等模板。

详情参考:https://www.layui.com/doc/modules/table.html#templet

其中这个d代表的就是服务器返回的数据,ban_img是数据对应的字段名

这还不够,接下来的才是关键,因为此时此刻你的表格是这个样子的

1.png

这个图片压根显示不全,可以这样来解决

<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>

可以看到我在底部加上了样式,这里有优先级的问题,所以必须是放在最下面,谨记!!!

但是目前效果是这样的:

2.png

貌似高度好了,但是这个宽是什么鬼,于是我就F12了一下

3.png

原来如此,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样式后,就统统搞定了,我这里只是设了固定大小,你们可以随意了~

最终效果:

4.png


推荐文章
layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

浅谈layui数据表格隐藏列的方法

在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test' ,url:'${pag

layui数据表格删除当前行的方法

数据表格如下:t2={ elem:'#test2', data:tableData2, page:false, width:$(parent.window).width()-50, cols:[[ {

如何用layui实现图片上传?

layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的layui.css和layui.js二、调用前端的html代码,设置id值。 上传图片   layui

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

layuiadmin是什么呀?

layuiAdmin是一种采用layui自建的纯前端MVC架构而成的后台模板系统开发框架,而不仅限于模板。layuiAdmin全面接管视图和路由,并自主完成数据渲染,服务端只负责数据接口,因此这赋予了

layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

怎么修改layui提示样式?

一直以来都认为layui挺好看的,包括它的弹层组件layer,不过今天恰好碰到了layui表单验证弹框的位置和样式不能调整的问题;它的默认样式是这样的:因为我页面布局的关系,弹框挡住了按钮,所以我决定

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui open怎么更改按钮的颜色?

layuiopen中可以使用skin来设置按钮颜色。skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同

layui如何清除表单数据?

layui清空表单数据的方法:1、调用reset()方法清空functionfomrReset() { document.getElementById("myform").reset(); }2、使用

layui算是前端框架吗?

layui首个版本发布于2016年秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

项目中如何优雅地使用函数 layui.define

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

layui如何支持 es5 写法?方法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'