grid图片展示 jquery_jqgrid 列显示图片

var img;

//自定义图片的格式，可以根据rowdata自定义

function alarmFormatter(cellvalue, options, rowdata) {

return ' ';

}

$(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("

");

$("#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;

});

}

});

});