layui的table中显示图片方法


Posted in Javascript onAugust 17, 2018

图片需要用到模板.templet:

注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style

<script type="text/javascript">

 layui.use('table',function () {
 var table= layui.table;
 table.render({
  elem:'#needstable'
  ,url:'{:url()}'
  ,method:'post'
  ,cellMinWidth:80
  ,page:true
  ,cols:[[
  {field:'needs_id',title:'id',fixed:'left',width:80}
  ,{field:'wx_username',title:'昵称',fixed:'left',width:80}
  ,{field:'wx_headimg',title:'头像',fixed:'left',templet:'<div><img src="{{ d.wx_headimg}}"></div>',style:'height:48px;width:48px;line-height:48px!important;'}

css,注意替换headimg

<style type="text/css">.layui-table-fixed-r td{height:58px!important;}
.layui-table-fixed-r th{height:58px!important;}
.layui-table img {
 max-width: 48px;min-height: 48px;
}


.laytable-cell-3-wx_headimg ,.laytable-cell-1-wx_headimg,.laytable-cell-2-wx_headimg,.laytable-cell-3-wx_headimg,.laytable-cell-4-wx_headimg,.laytable-cell-5-wx_headimg,.laytable-cell-6-wx_headimg,.laytable-cell-7-wx_headimg,.laytable-cell-8-wx_headimg,.laytable-cell-9-wx_headimg,.laytable-cell-10-wx_headimg,.laytable-cell-11-wx_headimg,.laytable-cell-12-wx_headimg,.laytable-cell-13-wx_headimg,.laytable-cell-14-wx_headimg{
 width: 48px!important;;padding:0px!important;height: 48px!important;;
 line-height: 48px!important;;
}

</style>

以上这篇layui的table中显示图片方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
node.js文件上传处理示例
Oct 27 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
Vue SSR 组件加载问题
May 02 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
layerUI下的绑定事件实例代码
Aug 17 #Javascript
JS实现的视频弹幕效果示例
Aug 17 #Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 #Javascript
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
chosen实现省市区三级联动
Aug 16 #Javascript
webuploader实现上传图片到服务器功能
Aug 16 #Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php生成QRcode实例
2014/09/22 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python框架flask表单实现详解
2019/11/04 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
电子商务专业求职信
2014/07/10 职场文书
毕业论文致谢信
2015/05/14 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书