EasyUI,TopJUI的datagrid显示图片并点击放大浏览

TopJUI是对EasyUI的封装，本质其实是一样的，本文以TopJUI为例，有问题可以下方留言，看到会回复，一起学习，共同进步。话不多说，直接源码。

1.静态页面，datagrid是动态创建的

<div class="topjui-row"><div class="topjui-col-sm12" id="PlanInspectionListInfoDiv"><div data-toggle="topjui-panel" id="PlanInspectionListInfoPanel" title="测试" style="height:500px;"><table id="PlanInspectionQuestionListInfo" style="height:500px"></table></div></div>
</div>

js，动态创建复合表头

var url = '@Url.Action("LoadPlanInspectionListQuestionDatagridInfo", "Inspection")';$("#PlanInspectionQuestionListInfo").iDatagrid({fit: true,fitColumns: true,method: 'GET',url: url,queryParams: {planid:@ViewBag.planid,usernumber: huserid},nowrap: false,emptyMsg: '没有数据',singleSelect: true,rownumbers: false, //是否加行号pagination: false, //是否显式分页rowStyler: function (index, row) {if (row.status == 0) {return 'color:red;';}},columns: [[{ field: "deptname", title: "部门", rowspan: 2, align: "center", width: 100 },{ field: "inspectionplace", title: "地址", rowspan: 2, align: "center", width: 100 },{ field: "insertdate", title: "时间", rowspan: 2, align: "center", width: 100 },{ title: "问题", colspan: 2, align: "center", width: 100 },{ title: "回复", colspan: 2, align: "center", width: 100 },{field: "status", title: "状态", rowspan: 2, align: "center", width: 100,formatter: function (value, row, index) {if (value == 0) {return '待解决';} else if (value == 1) {return '已解决';}}},{ field: "operate", title: "操作", rowspan: 2, width: 100, formatter: operateFormatter},],[{ field: "question", title: "描述", rowspan: 1, align: "center", width: 100 },{ field: "planinspectionquestionimg", title: "图片", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},{ field: "planinspectionfeedback", title: "描述", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},{ field: "planinspectionfeedbackimg", title: "图片", rowspan: 1, align: "center", width: 100, formatter: questionImageFormatter},]],**onLoadSuccess: function () {$('.image-list').on('click', '.cover', function () {var this_ = $(this);var images = this_.parents('.image-list').find('.cover');var imagesArr = new Array();$.each(images, function (i, image) {imagesArr.push($(image).children('img').attr('src'));});$.pictureViewer({images: imagesArr, //需要查看的图片，数据类型为数组initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false});});}**});

编写datagrid的格式化方法

 function questionImageFormatter(value, row, index) {var htmlstr;htmlstr = '<div class="image-list">';for (var i = 0; i < row.planinspectionquestionimg.length; i++) {if (i == 0) {htmlstr += "<div class='cover'>";htmlstr += '<img src="' + row.planinspectionquestionimg[i].imgurl + '"style="height: 45px;width: 50px;"></img>';htmlstr += '</div>';} else {htmlstr += "<div class='cover'>";htmlstr += '<img src="' + row.planinspectionquestionimg[i].imgurl + '"style="height: 45px;width: 50px;"></img>';htmlstr += '</div>';}}htmlstr += '</div>';return htmlstr;}

注意事项
点击事件的注册一定要在onloadsuccess中注册，否则不起作用
注意图标的地址
效果展示
点击放大图片，滚动鼠标也可以切换自如

js样式下载地址
https://download.csdn.net/download/silence_dou/12092177

EasyUI,TopJUI的datagrid显示图片并点击放大浏览相关推荐

WPF DataGrid显示图片的一种方法
DataGrid中添加图片列首先创建一个类,设置属性,表示每一行: public class MyDataObject{public int Number { get; set; }public B ...
marked.js读取markdown文件，图片实现点击放大
marked.js图片实现点击放大一.基础配置二.设置回调三.最终代码四.优化方向一.基础配置当前前端渲染markdown文件比较好的插件就是marked.js了. import mark ...
layui 怎么设置点击图片放大_layui表格内放置图片,并点击放大的实例
layui表格内放置图片,并点击放大的实例我就废话不多说了,直接上代码吧! cols: [[ //表头 { field: 'brand_img_url', title: '图片', sort: tr ...
ppt矩形里面的图片怎么放大缩小_PPT图片如何点击放大
PPT图片如何点击放大 [提要]<[电脑]PPT中图片点击放大效果的实现>由小编收集整理的,谨供需要实现电脑的朋友参考.内容如下: 用PPT做产品展示时,我们需要让观众看清楚细节.但同时又 ...
android图片点击全屏显示,Android浏览图片，点击放大至全屏效果
近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果. 例如以下. 我不知道QQ那个是怎么做的.我的思路例如以下: 首先.从图片缩 ...
python截取图片的ROI+OpenCV 在坐标中显示图片+鼠标点击图片显示点坐标
又来做下笔记了.现在我的毕业设计进行到数据处理的阶段,要在乳腺图像上截取4张相同大小的1024*1024图片,并且每张图片都必须覆盖微钙化点,以下是我现在用到的一些简单程序. 1.首先是截图程序如下: ...
Android浏览图片，点击放大至全屏效果
最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到 ...
Android：浏览图片，点击放大至全屏效果
最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到 ...
图片点击放大java_Eova列表显示图片并点击放大
eova3.3.0支持新的上传文件姿势:设置元字段配置 {"filename":"ORIGINAL_TIME"} 在原先保存原文件名的基础上动态增加了时间戳,在 ...
android html图片点击事件,TextView加载html图片并点击放大
实际上android中的textview是提供了加载html代码的功能的,使用的方法也很简单 textView.setText(Html.fromHtml("html",null, ...

EasyUI,TopJUI的datagrid显示图片并点击放大浏览

EasyUI,TopJUI的datagrid显示图片并点击放大浏览相关推荐

最新文章

热门文章