Question

我想在jqgrid的第一列显示一个小图像，用于从DB获取的所有数据。

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

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

我为图像做了类似的事情

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

我应该在哪里给图像src？怎么提到colmodel中的imageformat？

由于

Answer 1

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

$("#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将根据width中列的colModel属性的值缩放列宽。为了不使用图像缩放列，我还添加了fixed: true属性。

一些常见的评论：您应该注意JavaScript中的名称大小写。例如，您发布的第一行代码（jquery("#tableName").jqgrid({）应替换为jQuery("#tableName").jqGrid({。

Answer 2

您可以在url参数中通过xml或json移动图像，如下所示：

$image = "&lt;a href='#'>&lt;img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'>&lt;a>";



echo "<?xml version='1.0' encoding='iso-8859-1'?$et\n"; 
echo "<rows>"; echo "<page>".$page."</page>"; 
echo "<total>".$total_pages."</total>"; 
echo "<records>".$count."</records>"; // be sure to put text data in CDATA 

    echo "<row id='". $id."'>"; 
    echo "<cell>". $image."</cell>"; 
    echo "</row>"; 
    } 
 echo "</rows>";

请注意＆lt;是<

Answer 3

看这个例子：）

$("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
    loadData: function(filter) {
        return !filter.Name 
            ? data
            : $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });

        // use ajax request to load data from the server
        /*
        return $.ajax({
            method: "GET",
            url: "/YourUrlToAddItemFilteringScript",
            data: filter
        });
        */
    },
    insertItem: function(insertingItem) {
        var formData = new FormData();
        formData.append("Name", insertingItem.Name);
        formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);

        return $.ajax({
            method: "post",
            type: "POST",
            url: "/YourUrlToAddItemAndSaveImage",
            data: formData,
            contentType: false,
            processData: false
        });
    }        
},
fields: [
    {
        name: "Img",
        itemTemplate: function(val, item) {
            return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
                $("#imagePreview").attr("src", item.Img);
                $("#dialog").dialog("open");
            });
        },
        insertTemplate: function() {
            var insertControl = this.insertControl = $("<input>").prop("type", "file");
            return insertControl;
        },
        insertValue: function() {
            return this.insertControl[0].files[0]; 
        },
        align: "center",
        width: 120
    },
    { type: "text", name: "Name" },
    { type: "control", editButton: false }
]});

您可以在此处查看完整示例： http://jsfiddle.net/tabalinas/ccy9u7pa/16/

在jqgrid列中添加图像

3 个答案: