easyui-datagrid页面显示图片,点击弹框展示图片
2017-08-29 17:44
1626 查看
对应datagrid
js
<th data-options="field:'info_content',width:120,align:'center',formatter:userPicInfo.imgFormatter"> 图片内容 </th> <!-- 图片预览功能 --> <div style="display: none"> <div id="dlg" class="datagrid-toolbar" style="padding:5px;"> <img id="simg" src="" alt=""> </div> </div>
js
imgFormatter: function (value, row, index) { if ('' != value && null != value) { var strs = new Array(); //定义一数组 // if (value.substr(value.length - 1, 1) == ",") { // value = value.substr(1, value.length - 2) // } value = value.substr(1, value.length - 2); strs = value.split(","); //字符分割 var rvalue = ""; for (var i = 0; i < strs.length; i++) { rvalue += "<img onclick='userPicInfo.download(\"" + strs[i] + "\")' style='max-width:66px; max-height:40px;margin-left:3px;' src='" + strs[i] + "' title='点击查看图片'/>"; } return rvalue; } }, // //这里需要自己定义一个div 来创建一个easyui的弹窗展示图片 download: function (url) { $('#dlg').dialog({ title: '预览', width: 600, height: 400, resizable: true, closed: false, cache: false, modal: true }); $("#simg").attr("src", url); }
相关文章推荐
- 实现xlistview+xutils展示数据之后点击item跳转页面显示图片缩放和放大
- 黑马程序员之WinForm编程基础学习笔记:页面上有一张图片,默认是隐藏的,用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁则显示图片。
- easyui学习:datagrid显示图片并预览的实现方法
- easyui 的datagrid点击第二页时显示的内容和第一页相同
- easyui datagrid中图片的展示
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
- 如何扩展EasyUI在页面中立即显示选中的本地图片
- 在easyui的datagrid中如何显示图片?
- 页面加载完成后通过查询条件给easyui datagrid赋值,请求两次,并且值不显示问题
- 点击图片出现图片(以弹框方式显示)
- Android 点击图片放大展示 展示中可调节图片的缩放显示 图片查看器
- easyui datagrid设置fit: true后,页面显示不全的情况
- ajax返回的数据 用easyui的datagrid的表格来循环显示,用灰色背景的是隐藏的列。点击可以获取到隐藏的值
- 【阅读】《Head First jQuery》第二章——选择器与方法(一个点击图片页面显示文字的小例子)
- easyUI datagrid列表里面显示图片并预览的实现方法
- 怎样扩展EasyUI在页面中马上显示选中的本地图片
- 导航页面,三张图片后点击进入主页面 第一次显示导航再次访问不显示导航页面sharedPreference
- easyui datagrid 中如何显示图片
- 读取数据库中数据,在页面上直接显示图片(点击该图片变大)