jqgrid 列显示图片

时间:2023-03-09 16:03:45
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>