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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
生成二维码方法汇总
Dec 26 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python聊天室程序(基础版)
2018/04/01 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python通过链接抓取网站详解
2019/11/20 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
java关于string最常出现的面试题整理
2021/01/18 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
劳动仲裁调解书
2015/05/20 职场文书
小学入学感言
2015/08/01 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python