jQuery jqgrid列中添加图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16934318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding image in the column of jqgrid
提问by sahana
I want to display a small image in the first column of jqgrid for all data I get from DB.
我想在 jqgrid 的第一列中为我从 DB 获得的所有数据显示一个小图像。
jquery("#tableName").jqgrid({
.....
colNames : ['', ''],
colModel : [{
width : '25%',
},{
name : 'someValue',
index : 'somevalue',
widht : '75%',
sorttype: 'text'
}]
});
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.
我想在第一个 colmodel 中添加一个图像。我试过格式化程序，但不确定单元格值、行对象、选项。任何帮助，将不胜感激。
I did something like this for image
我为图像做了这样的事情
function imageFormat( cellvalue, options, rowObject ){
return '<img src="'+cellvalue+'" />';
}
Where should i give the image src ? how to mention the imageformat in the colmodel ?
我应该在哪里给图像 src ？如何在 colmodel 中提及 imageformat ？
Thanks
谢谢
回答by Oleg
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
}
],
...
});
The formatterneed 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 formatteras function without parameters. The property widthis the size of column in pixel. If you use other jqGrid options like autowidth: trueor specify the whole widthof the grid with respect of widthoption (and if you don't use shrinkToFit: falseoption) then jqGrid will scalethe column width based on the value of widthproperty of the column in colModel. To have no scaling of the column with the image I included fixed: trueproperty additionally.
该formatter只需要返回一个字符串，它是HTML片段这就需要被放置在列。因为 JavaScript 中的所有参数都是可选的，我们不需要，所以我们可以定义formatter为没有参数的函数。该属性width是以像素为单位的列大小。如果你使用像其他的jqGrid选择autowidth: true或指定的整个宽度相对于网格的width选项（如果你不使用shrinkToFit: false选项），然后将jqGrid的规模宽度的基础上值的列width列的属性colModel。为了不使用图像缩放列，我fixed: true另外包含了属性。
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({.
一些常见的评论：你应该小心 JavaScript 中的名称大小写。例如，您发布的第一行代码 ( jquery("#tableName").jqgrid({) 应替换为 jQuery("#tableName").jqGrid({.
回答by Sici
You can move the image through xml or json in your url parameter like this:
您可以在 url 参数中通过 xml 或 json 移动图像，如下所示：
$image = "<a href='#'><img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'><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>";
note that < is <
请注意 < 是 <
回答by Robert LUgo
Look this example :)
看看这个例子:)
$("#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 }
]});
You can see the complete example here: http://jsfiddle.net/tabalinas/ccy9u7pa/16/
你可以在这里看到完整的例子：http: //jsfiddle.net/tabalinas/ccy9u7pa/16/
