jqgrid 列显示图片
<script>
var img;
//自定义图片的格式,可以根据rowdata自定义
function alarmFormatter(cellvalue, options, rowdata) {
return ' <img src="/Content/4.jpg" id="img' + rowdata.Id + '" style="width:50px;height:50px;" />';
}
$(function () {
$('#imgDialog').hide(); //var data = { "appId": AppId,"appGroupId": currentNode, "PageNumber": 1, "PageSize": 20 };
$("#gridTable").jqGrid({
datatype: "json",
//postData: data,
url: "home/List",
mtype: 'POST',
colNames: ['姓名', '性别', '帐号', '地点', '会员等级', '图片'],
colModel: [
{ name: 'UserName', width: 60, sortable: false },
{ name: 'UserSex', width: 60, sortable: false, align: "center" },
{ name: 'LoginAccount', width: 60, sortable: false },
{ name: 'Address', width: 100, sortable: false },
{ name: 'Rank', width: 100, hidden: false, sortable: false },
//下面这句代码是加入图片的关键,
{ name: 'dsource_alarm', index: 'dsource_alarm', width: 100, align: "center", sortable: false, editable: false, formatter: alarmFormatter }
],
height: '100%',
gridComplete: function () {
$('#gridTable img').hover(function (e) {
$("body").append("<div id='preview'><img src='" + this.src + "' alt='Image preview'/></div>");
$("#preview")
.css("top", (e.pageY) + "px")
.css("left", (e.pageX) + "px")
.fadeIn("fast");
}
, function () {
$("#preview").remove();
}).click(function () {
$('#imgDialog img').attr('src', this.src);
$('#imgDialog').dialog({
autoOpen: true,
buttons: { "Ok": function () { $(this).dialog("close"); }, "Close": function () { $(this).dialog("close"); } },
draggable: true,
resizable: false,
bgiframe: true
});
img = this;
});
} });
});
</script>
jqgrid 列显示图片的更多相关文章
- easyui datagrid列显示图片
表格头 显示图片 jquery
- 给GridControl中的某列添加图片
要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...
- [代码]--给GridControl中的某列添加图片
要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...
- VS2003 下GridControl的列显示成图片+文字的形式实现
public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...
- DevExpress GridControl 列中显示图片
一.GridControl 的Columns中添加列 1.列名:FieldName命名为img 2.类型:ColumnEdit属性中 选择PictureEdit类型(RepositoryItemPic ...
- GridControl 列中显示图片 z
如何在 DevExpress.XtraGrid.GridControl 显示图片列. 方法很多,我把它们逐一写在附言中,方便大家分情况合理使用. 附言1 附言2 附言3 第 1 条附言 · ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 在DevExpress GridControl的一列中显示图片
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 近期做项目的时候用到了将GridControl中一列设置为PictureEdit类型,然后通过这一 ...
- iview table列中根据不同的状态显示不同的颜色,显示图片
使用reder可以实现 1.显示不同状态 2.显示图片
随机推荐
- 关于玩QQ消息导入导出功能的感想!
今天玩了一下QQ的导入导出聊天记录的功能,感觉自己有些白痴,因为作为一个软件开发人员对自己平时使用的软件的功能掌握的不够,别说其他的任何东西了就连功能性的操作有些也不知道更别说熟练或精通了,这不是一个 ...
- 华为OJ平台——查找组成一个偶数最接近的两个素数
import java.util.Scanner; /** * 问题描述:任意一个偶数(大于2)都可以由2个素数组成,组成偶数的2个素数有很多种情况, * 本题目要求输出组成指定偶数的两个素数差值最小 ...
- 关键字 this 的作用
1.关键字 this ①是指当前对象自己 当一个类中要明确指出使用对象自己的变量或函数时,就应该加上this关键字,小栗子a如下: public class A { string Name = &qu ...
- 在集群环境中使用 EhCache 缓存系统|RMI 集群模式
RMI 是 Java 的一种远程方法调用技术,是一种点对点的基于 Java 对象的通讯方式.EhCache 从 1.2 版本开始就支持 RMI 方式的缓存集群.在集群环境中 EhCache 所有缓存对 ...
- Retrofit入门
1 Retrofit retrofit = new Retrofit.Builder() .addConverterFactory(ScalarsConverterFactory.create()) ...
- css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失
.bottom_xf{ background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; posi ...
- markdown语法学习效果预览
注: 结合markdown官方文档 其中大部分例子和说明文字都摘自官方文档 官方链接:Markdown: Basics (快速入门). 一 段落.标题.区块代码 Markdown 支持两种标题的语法, ...
- 数据库连接池问题 Max Pool Size
摘自: http://blog.csdn.net/chensirbbk/article/details/6225268 Timeout expired 超时时间已到. 达到了最大池大小 错误及Max ...
- Android IOS WebRTC 音视频开发总结(十五)-- 培训课程大纲
最近在给公司做内部培训,主要是关于即时通讯和移动视频通话,包括android与android,ios与ios,android与ios,以及手机与PC. ------------------------ ...
- Android开发教程大全介绍
Android是由谷歌在2007年推出的一个开放系统平台,主要针对移动设备市场,目前版本为Android 4.0.Android基于Linux,开发者可以使用Java或C/C++开发Android应用 ...