<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 列显示图片的更多相关文章

  1. easyui datagrid列显示图片

    表格头 显示图片 jquery

  2. 给GridControl中的某列添加图片

    要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...

  3. [代码]--给GridControl中的某列添加图片

    要让GridControl的某列显示图片只需要数据源中有图片就可以正确显示 1.给DataSet添加一列,格式为image ds.Tables[].Columns.Add("SIGN&quo ...

  4. VS2003 下GridControl的列显示成图片+文字的形式实现

    public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...

  5. DevExpress GridControl 列中显示图片

    一.GridControl 的Columns中添加列 1.列名:FieldName命名为img 2.类型:ColumnEdit属性中 选择PictureEdit类型(RepositoryItemPic ...

  6. GridControl 列中显示图片 z

    如何在 DevExpress.XtraGrid.GridControl 显示图片列. 方法很多,我把它们逐一写在附言中,方便大家分情况合理使用. 附言1  附言2  附言3  第 1 条附言  ·  ...

  7. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  8. 在DevExpress GridControl的一列中显示图片

    作者:jiankunking 出处:http://blog.csdn.net/jiankunking 近期做项目的时候用到了将GridControl中一列设置为PictureEdit类型,然后通过这一 ...

  9. iview table列中根据不同的状态显示不同的颜色,显示图片

    使用reder可以实现 1.显示不同状态 2.显示图片

随机推荐

  1. Google Protocol Buffer 协议

    1. Protocol Buffers 简介 Protocol Buffers (ProtocolBuffer/ protobuf )是Google公司开发的一种数据描述语言,类似于XML能够将结构化 ...

  2. 关于 mysql 2003 客户端连接报错的处理方法

    在连接到 mysql 数据库服务器时,有时会在客户端报出 2003 的错误代码,并提示: 无法连接到服务器,但服务器却可以 ping 通,可能的原因如下: 1.网络不通.检查能不能ping通. 2.防 ...

  3. Java基础——clone()方法浅析

    一.clone的概念 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...

  4. 华为OJ平台——百钱买百鸡问题

    题目描述: 元前五世纪,我国古代数学家张丘建在<算经>一书中提出了“百鸡问题”:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一. 百钱买百鸡,问鸡翁.鸡母.鸡雏各几何? 思路: 这道题很简单,假 ...

  5. ossim系统原理与实践

    本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang.blog.51cto.com/350944/1353300

  6. pxecfg&kickstart生成脚本

    em tm 00:00:00:00:00:12 10.180.1.12 255.255.255.0 173.45.34.25 255.255.255.225 173.45.34.1 em tm 00: ...

  7. 5 Ways to Learn and Remember Absolutely Anything

    http://www.inc.com/quora/5-ways-to-learn-and-remember-absolutely-anything.html Start too early on th ...

  8. LiveView 0.8 RC1 could boot evidence files acquired from Win10 64bit

    The latest Windows 10 will be more and more popular in the very near future. Now let's take a look i ...

  9. EPPB also support BlackBerry device

    各位看倌不是小弟要賣弄英文,實在是外國朋友希望知道上一篇"雲取證"中所用的工具Elcomsoft Phone Password Breaker支援黑莓機否?又要求非要看到截屏才算數 ...

  10. frame和iframe的区别

    转自:http://blog.csdn.net/lyr1985/article/details/6067026        CSDN 1.frame不能脱离frameSet单独使用,iframe可以 ...