且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在jqgrid的列中添加图像

更新时间:2023-12-01 13:59:58

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

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({.