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);
		
	}	
	



  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值