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.显示图片
随机推荐
- note name
谦谦君子:借用<周易·谦>:“初六,谦谦君子,用涉大川,吉.” 温润如玉:化用<诗经·卫风·淇奥>“有匪君子,如切如磋,如琢如磨”之义.
- 华为OJ平台——字符串分隔
题目描述: 连续输入字符串,请按长度为8拆分每个字符创 后输出到新的字符串数组: 长度不是8整数倍的字符串请在后面补数字0,空字符串不处理 输入 连续输入字符串(输入两次,每个字符长长度小于100)输 ...
- Oracle 学习系列之二(会话与事务级临时表和dual表 )
一. 会话临时表 --创建会话临时表create global temporary table tmp_user_session(user_id int, user_name varchar2(20) ...
- 二模08day1解题报告
T1.高中运动会(match) N个数的最大公约数. gcd不解释. T2.智力游戏 火柴棒等式形如a+b=c,现在给出啊a,b,c求使等式成立的最小的移动次数. 火柴棒表示数字不用解释了吧,在此提醒 ...
- 从零开始安装Hadoop视频教程
从零开始安装Hadoop视频教程 Hadoop 是一个能够对大量数据进行分布式处理的软件框架,用这种技术使得普通的PC服务器甚至一些近过时的服务器也能够发挥余热,组成大型集群系统,由于它的可伸缩性能够 ...
- [Hibernate 1]Hibernate的环境搭建
一.Hibernate是什么 直接使用JDBC操作数据库的步骤很繁琐,JDBC操作的是关系型数据库,而我们用JAVA开发程序,则使用面向对象的思想.Hibernate正是在这两种不同的模型之间建立关联 ...
- AX 获得当前Grid的数据源的记录行数
sysQuery::CountTotal();方法 eg: int lines = sysQuery::CountTotal( SalesTable_ds.QueryRun());
- IEF could not decode Chinese character in IE history well
My friend is working on some case, and she looks not in the mood. I ask her what's going on. She wan ...
- Unieap3.5-Grid翻页不提示修改
<toolbar export="{defaultType:'server'}" paging="{onPagingModified:ssSettleCheck.o ...
- PHP 统计中文字符串的长度
中文网站一般会选择两种编码:gbk/gb2312或是utf-8. gbk编码下每个中文字符所占字节为2,例: $zhStr = ‘您好,中国!’; echo strlen($zhStr); // 输出 ...