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

	];

效果

​