在jqgrid的列中添加图像 [英] Adding image in the column of jqgrid

问题描述

我想在jqgrid的第一栏中显示一个小图像，用于显示我从数据库获得的所有数据.

I want to display a small image in the first column of jqgrid for all data I get from DB.

jquery("#tableName").jqgrid({
.....
colNames : ['', ''],
colModel : [{
    width : '25%',
    },{
    name : 'someValue',
    index : 'somevalue',
    widht : '75%',
    sorttype: 'text'
}]
});

我想在第一个colmodel中添加一个图像.我试过格式化程序，但不确定单元格值，行对象，选项.任何帮助，将不胜感激.

I want to add an image in the first colmodel. i tried formatter, but not sure about cellvalue, row object, options. Any help would be appreciated.

我对图像做了这样的事情

I did something like this for image

function imageFormat( cellvalue, options, rowObject ){
        return '<img src="'+cellvalue+'" />';
    }

我应该在哪里给src图片?如何在colmodel中提及imageformat?

Where should i give the image src ? how to mention the imageformat in the colmodel ?

谢谢

推荐答案

例如，如果您需要在网格的第一列中设置图像，则可以定义网格

If you need to set image in for example the first column of the grid you can define the grid

$("#tableName").jqGrid({
    .....
    colNames: ['', ''],
    colModel: [
        {
            name: 'someUniqueColumnName',
            width: 25,
            fixed: true,
            formatter: function () {
                return "<img src='http://myserver/path/i.jpg' alt='my image' />";
            }
        },
        {
            name: 'someValue',
            width: 123 // width of column in pixel
        }
    ],
    ...
});

formatter仅需要返回一个字符串，该字符串是HTML片段，需要放在列中.由于JavaScript中的所有参数都是可选的，因此不需要，我们可以将formatter定义为不带参数的函数.属性width是以像素为单位的列的大小.如果您使用autowidth: true之类的其他jqGrid选项或相对于width选项指定网格的整个宽度(并且如果您不使用shrinkToFit: false选项)，那么jqGrid将 scale 基于colModel中列的width属性值的列宽.为了不缩放图像的列，我还添加了fixed: true属性.

The formatter need just return a string which is HTML fragment which need be placed in the column. Because all parameters in JavaScript are optional and we need no then we can define formatter as function without parameters. The property width is the size of column in pixel. If you use other jqGrid options like autowidth: true or specify the whole width of the grid with respect of width option (and if you don't use shrinkToFit: false option) then jqGrid will scale the column width based on the value of width property of the column in colModel. To have no scaling of the column with the image I included fixed: true property additionally.

一些常识:在JavaScript中使用名称时应格外小心.例如，您发布的第一行代码(jquery("#tableName").jqgrid({)应该替换为jQuery("#tableName").jqGrid({.

Some common remark: you should be careful with case of names in JavaScript. For example the first line of code which you posted (jquery("#tableName").jqgrid({) should be replaced with jQuery("#tableName").jqGrid({.

这篇关于在jqgrid的列中添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！