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

不念不忘少年蓝@ 2022-07-16 12:53 244阅读 0赞

想要在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);
    		
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 上传图片并显示_AngularJS实现图片上传和预览功能的方法分析

本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考，具体如下： html5原生方法先看一下html5原生方法上传和预览图片的实现： //

末蓝、/ 2023年01月08日 06:27/ 0 赞/ 164 阅读

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

想要在easydatagrid列表里面显示图片，并实现点击预览功能，可以使用以下方法进行实现：下面我以图片字段格式为：upload/file/aa.png,up

不念不忘少年蓝@/ 2022年07月16日 12:53/ 0 赞/ 245 阅读

相关 js实现上传图片预览的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月16日 07:11/ 0 赞/ 342 阅读

相关上转图片并预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

淩亂°似流年/ 2022年06月07日 10:12/ 0 赞/ 297 阅读

相关 jQuery实现上传图片时，显示图片预览效果

代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2022年05月24日 12:27/ 0 赞/ 392 阅读

相关 JS实现上传图片的三种方法并实现预览图片功能

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；

爱被打了一巴掌/ 2022年05月13日 03:20/ 0 赞/ 262 阅读

相关 easyui中datagrid列表里面带有textbox和combobox的示例

datagrid在默认情况下，我们只是用来展示数据，大多数情况下是和分页结合使用，但是偶尔的一些特殊需求，他要展示一个form表单的一些列表项，而且还可以在列表中进行修改，最终

港控/mmm°/ 2022年03月27日 10:52/ 0 赞/ 269 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 809 阅读

相关 JavaScript实现图片上传并预览并提交

学习一下思路，上传部分可以用vue对象方法和axios代替图片上传并预览 ![这里写图片描述][SouthEast] HTML <div clas

桃扇骨/ 2021年09月18日 02:06/ 0 赞/ 633 阅读

相关用JavaScript实现图片上传并预览

一、前端界面是通过jqgrid展示的 jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。 jqGrid是用ajax

深藏阁楼爱情的钟/ 2021年08月30日 00:04/ 0 赞/ 779 阅读