layui 表格中实现照片预览，点击查看原图

2021-11-23 19:20 619阅读 0赞

人员表格中实现照片预览，并且可点击放大。查看原图

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

## 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20211122/2780d38084ed4c04a63b7cf3cc20d231.png