5

我想在 jqgrid 的第一列中为我从 DB 获得的所有数据显示一个小图像。

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

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

我为图像做了这样的事情

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

我应该在哪里提供图像 src ？如何在 colmodel 中提及图像格式？

谢谢

4

3 回答 3

10

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

$("#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是以像素为单位的列大小。如果您使用其他 jqGrid 选项，例如autowidth: true或针对选项指定网格的整个宽度width（并且如果您不使用shrinkToFit: false选项），那么jqGridwidth将根据colModel. 为了不缩放带有图像的列，我fixed: true另外包含了属性。

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

于 2013-06-05T12:37:25.990 回答
0

您可以通过 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;

于 2015-06-03T21:11:50.500 回答
0

看这个例子:)

$("#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/

于 2017-08-16T22:49:59.987 回答