layui 表格中实现照片预览,点击查看原图
人员表格中实现照片预览,并且可点击放大。查看原图
<table id="dutyInfoTable" class="layui-hide"></table>
js
//定义列
var cols = [
[{
type: 'radio',
width: 60
}, {
type: 'numbers',
width: 50
}, {
field: 'org_id',
title: '所属单位',
align: 'center',
templet: function(d) {
return LocalData.getOrg().name;
}
}, {
field: 'name',
minWidth: 150,
title: '人员名称',
align: 'center'
}, {
field: 'type',
minWidth: 150,
title: '人员类型',
align: 'center',
templet: function(d) {
return loadEnum.getValue("duty_type", d.type);
}
}, {
field: 'phone1',
title: '联系方式1',
minWidth: 150,
align: 'center'
}, {
field: 'phone2',
title: '联系方式2',
minWidth: 150,
align: 'center'
}, {
field: 'url',
title: '照片缩略图',
width: 100,
align: 'center',
templet: function(d) {
//return "<img src='"+datum.formatUrl(d.url)+"' style='height:50px;'";
var url ="/img/duty/no_pic.jpg";
if(!comm.isEmpty(d.url)){
url = datum.formatUrl(d.url);
}
return '<a href="' + url + '" target="_blank " title="点击查看">' +
'<img src="' + url + '" style="height:20px;" />' +
'</a>';
}
}, {
field: 'on_duty',
minWidth: 200,
title: '上岗状态',
align: 'center',
templet: function(d) {
return loadEnum.getValue("duty_state", d.on_duty);
}
}, {
fixed: 'right',
width: 100,
title: '操作',
align: 'center',
toolbar: '#optButton'
}]
];
效果
layui 表格中实现照片预览,点击查看原图的更多相关文章
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- 在sublime text 3中设置浏览器预览快捷键
1.安装 SideBarEnhancements ctrl+shift+p,进入命令模式,然后输入package control(或者直接输 pci 或许也行),回车: 输入:SideBarEnhan ...
- [js开源组件开发]-手机端照片预览组件
手机端照片预览组件 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上 ...
- Android Studio xml文件中的布局预览视图
操作系统:Windows 10 x64 IDE:Android Studio 3.3.1 更新了Android Studio之后,xml文件中的布局预览视图变得如此简洁! 原因是没有勾选Show La ...
- Xamarin XAML语言教程Visual Studio中实现XAML预览
Xamarin XAML语言教程Visual Studio中实现XAML预览 每次通过编译运行的方式查看XAML文件效果,需要花费大量的时间.如果开发者使用XAML对UI进行布局和设计,可以通过预览的 ...
- JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
- 在sublime-text中设置浏览器预览
配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...
- 在TVideoGrabber中如何在预览时设置相机属性
在使用TVideoGrabber进行预览时,如何设置相机的属性呢?比如曝光.对比度.亮度等. 下面来看一下,如何通过编程来调整这些设置: ——通过指定VideoDevice属性(在VideoDevic ...
- Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)
目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...
随机推荐
- 架构篇 | 带你轻松玩转 LAMP 网站架构平台(一)
作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 LAMP 架构? LAMP 架 ...
- vector中erase()与insert()用法
erase()用法:https://blog.csdn.net/duan19920101/article/details/50717748 注:erase是删除指定位置的元素,不能删除给定元素值.若要 ...
- mysql之drop、truncate和delete的区别
今天在整理mysql数据库笔记的时候突然想到一个问题,就是drop.truncate和delete的区别,乍一看三者都是有删除的功能,但是具体来看还是有很多区别的.我先把这三个的作用简单说一下,有前辈 ...
- POJ1463-Strategic game-(树形dp)
http://poj.org/problem?id=1463 题意:有一棵n个结点的树,要在这棵树上放士兵守卫,一个士兵可以守卫自己所在的位置以及与之相邻的点.问最少放多少个士兵? 题解:对于每个点, ...
- 1.Java介绍
第一章 走进Java 一.Java技术体系 Java技术体系组成部分:Java程序设计语言.Java虚拟机.Class文件格式.Java API类库 JDK:Java程序设计语言 + Java虚拟机 ...
- 有关OutputDebugString的一点儿事实
我最近花了一些时间分析OutputDebugString方法.在我的另一个实验中,我需要一个仅依赖于本机API的OutputDebugString版本.在实现它的过程中,我发现了一些关于OutputD ...
- Android apps for “armeabi-v7a” and “x86” architecture: SoC vs. Processor vs. ABI
INSTRUCTION SET: Processors are made of semiconductor dies, usually electronic-grade mono-crystallin ...
- 获取当前页面url指定参数值
function getParam(paramName) { paramValue = "", isFound = !1; if (this.location.search.ind ...
- C函数之genv
函数原型: include<stdlib.h> char *getenv(char *envvar); 函数说明: getenv()用来取得参数envvar环境变量的内容.参数envvar ...
- Django ORM性能优化 和 图片验证码
一,ORM性能相关 1. 关联外键, 只拿一次数据 all_users = models.User.objects.all().values('name', 'age', 'role__name') ...