jqgrid在列中显示图片

最新推荐文章于 2021-03-04 03:30:09 发布

LvJinYang

最新推荐文章于 2021-03-04 03:30:09 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jqgrid

本文链接：https://blog.youkuaiyun.com/LvJinYang/article/details/97544145

jqgrid 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在jqGrid中自定义列格式以显示图片，包括图片预览和对话框弹出功能的实现，适用于前端开发人员学习和参考。

jqgrid在列中显示图片

<script>
    $(function () {
        showEmp();
    })
    function showEmp() {
        //清空书单table
        $('#bookTable').empty();
        var img;
        //自定义图片的格式，可以根据rowdata自定义
        function alarmFormatter(cellvalue, options, rowdata) {
            return ' <img src="'+cellvalue+'" id="img' + rowdata.Id + '"  style="width:50px;height:50px;" />';
        }
            $('#imgDialog').hide();
        //展示图书信息
        // 初始化数据表格
        $('#bookTable').jqGrid({
            // 整合使用bootstrap样式的属性
            styleUI:'Bootstrap',
            url:'/product/findAll',
            datatype:'json',
            colNames:['ID','Name','Picture','Price','Buy'],
            // 开启表格编辑模式
            cellEdit:true,
            // 指定表单编辑时提交的路径
            editurl:'/product/operProduct',
            colModel:[
                {name:'id',align:'center'},
                {name:'productName',align:'center',editable:true},
                { name: 'picpath', index: 'dsource_alarm', width: 100, align: "center", sortable: false, editable: false, formatter: alarmFormatter },
                {name:'price',align:'center',editable:true},
                {name:'operation',align:'center',
                    formatter:function (value,options,row) {
                        return '<input class="btn btn-info" οnclick=buyBook("'+row.id+'") type="button" value="购买">';
                    }
                },
            ],
            autowidth:true,
            pager:'#bookpager',
            rowList:[2,5,10,15,20,50],
            rowNum:2,
            page:1,
            viewrecords:true,
            multiselect:true,
            rownumbers:true,
            height:350,
            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;
                });
            }
        }).navGrid('#bookpager');
    };
</script>