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.显示图片
随机推荐
- 查询数据库中表或视图或存储过程的数量 sql 语句
如果一个数据库中表的数量较多的话,那么在统计数据库中表的数量或视图或存储过程的数量时,如果还有一个一个去数,那就太麻烦了,其实可以通过 sql 语句来查询的,sql 语句的查询方法如下: sql se ...
- ndk-gdb 对java/native code联合调试(升级版)
之前写过一篇 关于android native 开发,调试的文章(http://www.cnblogs.com/yaozhongxiao/archive/2012/03/13/2393959.html ...
- Java基础——序列化
Java的“对象序列化”能将一个实现了Serialiable接口(标记接口,没有任何方法)的对象转化为一组byte,这样日后要用到这个对象的时候,就能把这些byte数据恢复出来,并据此重新构建那个对象 ...
- php 调用.net的webservice 需要注意的
首先 SoapClient类这个类用来使用Web services.SoapClient类可以作为给定Web services的客户端.它有两种操作形式:* WSDL 模式* Non-WSDL 模式在 ...
- ios学习开发阶段小结
总结一下,开发了1个月10天的ios经验. 先晒成绩单:两个实验性质的app,一个wifi管家,一个图片壁纸软件 技术小结: 1.熟悉基本的各种ns语法:#import,#include,@class ...
- 理解python可变类型vs不可变类型,深拷贝vs浅拷贝
核心提示: 可变类型 Vs 不可变类型 可变类型(mutable):列表,字典 不可变类型(unmutable):数字,字符串,元组 这里的可变不可变,是指内存中的那块内容(value)是否可以被改变 ...
- WinForm中使用AnyCAD三维控件 の 初始化
在WinForm中可以方便的集成AnyCAD.Net三维控件,只需要以下几部即可完成. 一.添加DLL程序集 AnyCAD.Foundation.Net.dll AnyCAD.Presentation ...
- .NET中的计时器控件Timer
本章借介绍一些粗浅的Timer控件使用方法. 介绍Timer控件的常用属性和事件 1. Interval 属性表示 Timer控件的时间间隔. 类型是int默认是毫秒. 2. Enabled 属性 表 ...
- ref和out的区别,值类型和引用类型的使用
今天刚刚明白ref和out的区别,只限于个人理解如有不同请赐教,谢谢 首先我感觉ref和out是针对于值类型来说,以前一直认为是针对于引用类型看下面的一段代码 1.首先结果 i=0:ints[0]=0 ...
- ASPX页面包含inc文件、用户控件、普通html文件
如果你是从asp程序员转过来一定不习惯.net的编程风格吧,代码和页面时分离的,asp和php里面时常是引入, 比如<!--#include File="xxxxxxx"-- ...