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'
		}]

	];

效果

​