easyui datagrid 显示图片，单击后浏览图片

2016-04-24 09:51:35 3.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Spring Boot 菜鸟教程 7 EasyUI datagrid jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。案例使用EasyUI插件 datagrid：向用户展示列表数据。 dialog：阅读详情

图片路径保存在数据库filepath字段中，图片怎么都显示不出来
field: 'filepath', title: '图片', width: 50, sortable: true,
formatter:function(value,row){
var str = "";
if(value=="" || value==null){
str = "<img src='~/Content/Pic/none.jpg' />";
}else{
str = "<img src='+value+'/>";
}
return str;
}
是路径的问题么？还有单击浏览图片要怎么做？

...全文

EasyUI实现图片的上传后与其他文本框的提交以及DataGrid中图片的展示　　图片即文件，在jsp中文件上传很简单，一个type为file的input，一个form指定enctype为multipart/form-data，通过post提交到后台利用apache的commons-fileupload.XXjar即可实现。EasyUI的filebox组件也是用来进行文件上传的，但我这里的业务需求不仅仅是图片上传，还有其他文本框的提交，所以需要文件上传后再点击保存。界面展... 阅读详情

lixy218

.NET社区 62,272 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

Xanl 2016-05-09

打赏
举报


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg(\""+value+"\") '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

magicv587 2016-05-06

打赏
举报

引用 18 楼 lixy218 的回复:

[quote=引用 16 楼 u010811342 的回复:]


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg(\'"+value+"\') '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

看错了、你这样试试

我修改了一下，对了！谢谢你的提示！[/quote] 用这段代码点击浏览图片一直提示错误能否告知怎么修改的呢

Xanl 2016-05-05

打赏
举报


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg(\'"+value+"\') '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

看错了、你这样试试

Xanl 2016-05-05

打赏
举报

少加单引号了还有、左边的双引号是中文的要用英文的的的

Xanl 2016-05-05

打赏
举报


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg('"+value+"') '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

lixy218 2016-05-05

打赏
举报

引用 12 楼 u010811342 的回复:

var img 写在函数的外面

谢谢你！ formatter: function (value, row, index) { return "<a href='javascript:showImg(“+value+") '>浏览图片</a>"; } function showImg(img) { $("#dlgImg").dialog('open'); $("#showImg").attr("src",img); grid.datagrid("clearSelections"); } 当value有值时，提示正则表达式错误，是怎么回事？value的值是/Content/Pic/ne.jpg

Xanl 2016-05-05

打赏
举报

var img 写在函数的外面

lixy218 2016-05-05

打赏
举报

引用 16 楼 u010811342 的回复:


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg(\'"+value+"\') '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

看错了、你这样试试

我修改了一下，对了！谢谢你的提示！

lixy218 2016-05-05

打赏
举报

引用 16 楼 u010811342 的回复:


formatter: function (value, row, index) {  
                     return "<a href='javascript:showImg(\'"+value+"\') '>浏览图片</a>";
                 }
function showImg(img) {
    $("#dlgImg").dialog('open');
    $("#showImg").attr("src",img);
    grid.datagrid("clearSelections");    
}

看错了、你这样试试

提示语法错误了

lixy218 2016-05-04

打赏
举报

问个新问题，下面的代码是可以显示图片 formatter: function (value, row, index) { return "<a href='javascript:showImg() '>浏览图片</a>"; } function showImg() { $("#dlgImg").dialog('open'); $("#showImg").attr("src","/Content/Pic/ne.jpg"); grid.datagrid("clearSelections"); } 如果我改成下面的代码就不行 formatter: function (value, row, index) { var img ="/Content/Pic/ne.jpg"; return "<a href='javascript:showImg(img) '>浏览图片</a>"; } function showImg(img) { $("#dlgImg").dialog('open'); $("#showImg").attr("src",img); grid.datagrid("clearSelections"); } 请问是哪里不对？

lixy218 2016-05-03

打赏
举报

引用 9 楼 u010811342 的回复:

鼠标左键按住none这个图片，拖到cshtml中，我就不信还不显示！

我用火狐浏览器右键查看图像，显示能看到，证明不是路径问题了，但是在datagrid中不显示，难道是datagrid中没设置图片大小？

Xanl 2016-05-03

打赏
举报

鼠标左键按住none这个图片，拖到cshtml中，我就不信还不显示！

lixy218 2016-05-03

打赏
举报

引用 7 楼 apollokk 的回复:

图片不显示就还是路径不正确，/Content前面有没有应用程序名？

Hello World, 2016-04-30

打赏
举报

图片不显示就还是路径不正确，/Content前面有没有应用程序名？

lixy218 2016-04-28

打赏
举报

引用 5 楼 starfd 的回复:

你将你最终生成的img部分的html代码贴出来呢，然后点击在新页面打开，只要用
<a href="图片地址"><img src="图片地址"></a>

field: 'filepath', title: '图片', width: 50, sortable: true, formatter:function(value,row){ var str = ""; if (value == "" || value == null) { str = "<a href='/Content/Pic/none.jpg'><img src='/Content/Pic/none.jpg' /></a>"; } else { str = "<a href='+ value +'><img src='+ value+' /></a>"; } return str; } 1. str = "<a href='/Content/Pic/none.jpg'><img src='/Content/Pic/none.jpg' /></a>"; href链接是可以打开的，但img图片不显示 2.str = "<a href='+ value +'><img src='+ value+' /></a>"; href链接找不到资源，请求的URL： /Test/+ value + 找不到资源，图片同样不显示

娃都会打酱油了 2016-04-28

打赏
举报

你将你最终生成的img部分的html代码贴出来呢，然后点击在新页面打开，只要用

<a href="图片地址"><img src="图片地址"></a>

lixy218 2016-04-28

打赏
举报

我按照js的路径修改了，就是不显示图片

Hello World, 2016-04-25

打赏
举报

cshtml会被加工过一遍，再输出给浏览器，你看看浏览器里面显示的内容是什么就明白了。客户端使用相对或者绝对地址，总之不是~开头的

lixy218 2016-04-24

打赏
举报

引用 1 楼 sp1234 的回复:

html/javascript 不认识什么 ~/ 打头的路径，那是asp.net 路径，不要把 asp.net 技术跟脚本技术搞混了。

这个在cshtml是可以显示的，我就是把这个复制过来的

以专业开发人员为伍 2016-04-24

打赏
举报

html/javascript 不认识什么 ~/ 打头的路径，那是asp.net 路径，不要把 asp.net 技术跟脚本技术搞混了。

easyui datagrid 显示图片，单击后浏览图片

相关推荐