easyUI datagrid列表里面显示图片并预览的实现方法

 想要在easydatagrid列表里面显示图片,并实现点击预览功能,可以使用以下方法进行实现:


下面我以图片字段格式为:upload/file/aa.png,upload/file,bb.png来简单说明



//这个是datagrid列表显示的那一行

 <th data-options="field:'images',width:300,align:'center',formatter:imgFormatter">图片预览</th>

//显示图片的js

	//图片添加路径
	function imgFormatter(value,row,index){
		 if('' != value && null != value){
		var strs = new Array(); //定义一数组 
		if(value.substr(value.length-1,1)==","){
			value=value.substr(0,value.length-1)
		}
			strs = value.split(","); //字符分割 
	  var rvalue ="";		   
		for (i=0;i<strs.length ;i++ ){ 
			rvalue += "<img οnclick=download(\""+strs[i]+"\") style='width:66px; height:60px;margin-left:3px;' src='<%=path%>" + strs[i] + "' title='点击查看图片'/>";
			} 
	    return  rvalue; 	 
		 }
		}

//这里需要自己定义一个div   来创建一个easyui的弹窗展示图片
	function download(img){
		var simg =  "http://....com/"+ img;
		$('#dlg').dialog({
		    title: '预览',
		    width: 600,
		    height:750,
		    resizable:true,
		    closed: false,
		    cache: false,
		    modal: true
		});
		$("#simg").attr("src",simg);
		
	}	
	



已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页