<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. 注册表 锁IE首页

    用附件中的修改软件,或者用以下修改注册表的办法.   一.注册表被修改的原因及解决办法 其实,该恶意网页是含有有害代码的ActiveX网页文件,这些广告信息的出现是因为浏览者的注册表被恶意更改的结果. ...

  2. 常用思科设备图标(JPG+矢量图)

    常用思科设备图标 在制作网络拓扑图示时我们利用MS Visio或亿图图示等制图软件自带的网络设备绘制拓扑图感觉提供的设备图标非常有限,往往不满足我们的要求,这时就常需要找一些思科的设备图标,在网上到处 ...

  3. 企业内网信息安全实践-记ChinaUnix技术交流

    企业内网信息安全实践 随着棱镜计划的曝光,越来越多的信息安全的事件暴露在公众面前.对于企业来说,遭受到黑客攻击和破坏是家常便饭,只是您没有觉察到.自从09年就开始研究Ossim0.9版本,历经进10个 ...

  4. 新写的c++日志库:log4K

    网是开源的c/c++日志库也不少,但用起来总觉得不方便,于是动手写了一个C++日志框架Log4K. 测试代码: #include "log4k.h" #pragma comment ...

  5. UML类图与类的关系详解

    摘自:http://www.uml.org.cn/oobject/201104212.asp UML类图与类的关系详解 2011-04-21 来源:网络 在画类图的时候,理清类和类之间的关系是重点.类 ...

  6. 网络流量监控工具iftop

    #-------------------网络流量监控工具iftop---------------##! /bin/sh #1.首先安装依赖关系包yum install flex byacc libpc ...

  7. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  8. synchronized的重入

    /** * synchronized的重入 * */ public class SyncDubbo1 { public synchronized void method1(){ System.out. ...

  9. jquery之val()和attr("value")

    1.attr("value")=原来的默认值 ,而val()=用户改变的值.

  10. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...