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>
时间: 2024-11-12 23:23:43

jqgrid 列显示图片的相关文章

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

在DevExpress GridControl的一列中显示图片

最近做项目的时候用到了将GridControl中一列设置为PictureEdit类型,然后通过这一列来显示图片.经过尝试发现有以下两种方式可行. 方法一.知道图片的路径与名称 比如:在数据库中存储了图片的路径(包括:本地路径.服务器路径),那么在可以通过非绑定列的方式来实现. 1.创建了一个非绑定列并设置其相应的属性,属性设置如下: FieldName设为 Photo(该字段名必须是唯一的) UnboundType设为 UnboundColumnType.Object ColumnEdit设为R

DevExpress GridControl 列中显示图片

一.GridControl 的Columns中添加列 1.列名:FieldName命名为img 2.类型:ColumnEdit属性中 选择PictureEdit类型(RepositoryItemPictureEdit) 二.GridControl绑定的数据,不管是DataTable.List或者其他源,添加一个列,列名为img. 以DataTable为例: void bindGrid01() { DataTable dt = new DataTable(); dt.Columns.Add(new

在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好

花了一下午时间,终于学会了在数据库中存储图片,以及在界面中显示图片了. 存储图片有两种方法: 一种是:直接把图片转换成二进制文件存储在数据库中. 一种是:存储图片的路径到数据库,用的时候直接调用路径给image等图像控件即可. 两种方法,有利有弊,第一种方法适合存储量少且重要的图片信息.第二种方法适合存储量大但不是太重要的图片. 我使用的是第二种方法,简单,实用. 下面就是我具体的实现过程: 首先我新建了两个网页文件,insert_photo.aspx / select_photo.apsx 第

php数据库保存图片与显示图片

无论是网站设计还是办公系统.购物商城,都需要在网页上显示图片,图片都是从数据库提取的,接下来我们看一看通过图片路径保存并显示图片的方式: 首先要在表中保存图片的路径,注意:路径是从WWW目录开始找而不是从磁盘根找,/代表WWW目录: 表中img就是储存的图片路径,也就是WWW目录下的路径,既然表中储存了路径,那么我们就可以通过PHP链接数据库来获取了: <?php require "DBDA.class.php";//调用封装类 $db = new DBDA(); $sql =

STM32学习之路-LCD(3)&lt;显示图片&gt;

祝大家端午和六一快乐!原本今天是想休息休息的,但是实在无奈没什么事干.所以就来学习学习LCD显示图片的函数 函数是照搬奋斗的例子,算是些笔记吧.不过奋斗的例子注释的不是很详细.今天去看了正点原子的论坛,唉..瞬间感觉正点原子做得真的很好 能把所有的资料都开源,并且论坛上大多问题都耐心的解答了.这实在是非常非常好的售后服务了!!自己也偷偷的去下了写资料来看看,(*^__^*) 嘻嘻-- 好,进入主题: 开发板:奋斗V5 LCD:3寸 400X240 直接上代码吧 void lcd_DrawPict

Qt 显示图片 放大 缩小 移动(都是QT直接提供的功能)

本文章原创于www.yafeilinux.com 转载请注明出处. 现在我们来实现在窗口上显示图片,并学习怎样将图片进行平移,缩放,旋转和扭曲.这里我们是利用QPixmap类来实现图片显示的. 一.利用QPixmap显示图片. 1.将以前的工程文件夹进行复制备份,我们这里将工程文件夹改名为painter05.(以前已经说过,经常备份工程目录,是个很好的习惯) 2.在工程文件夹的debug文件夹中新建文件夹,我这里命名为images,用来存放要用的图片.我这里放了一张linux.jpg的图片.如下

jquery html5 file 上传图片显示图片

最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片.在网上找了很多资料也未能如愿,如是,就用jquery ,html5,实现了,由于开发是在linux 所以未能在ie下测试,在forefox,chrom下是可以的. 一.html下的代码是: <div class=' input_box' > <span class='spac' >头</span>相:<input class="input_style" id="'head

Android TextView里直接显示图片的三种方法

方法一:重写TextView的onDraw方法,也挺直观就是不太好控制显示完图片后再显示字体所占空间的位置关系.一般如果字体是在图片上重叠的推荐这样写.时间关系,这个不付源码了. 方法二:利用TextView支持部分Html的特性,直接用api赋图片.代码如下: //第一种方法在TextView中显示图片 String html = "<img src='" + R.drawable.circle + "'/>"; ImageGetter imgGett