jQuery jqGrid中的图像列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2288021/
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
image column in jqGrid?
提问by Ritz
I want a image column in my jQGrid,I have used a formatter,but doesnot work,please give me the solution for this.
我想在我的 jQGrid 中有一个图像列，我使用了格式化程序，但不起作用，请给我解决方案。
my code is as follows:
我的代码如下：
jQuery(document).ready(function() {
var TheGrid ;
var resp;
jQuery("#registerUsers").jqGrid({
url: 'EventsList.aspx',
datatype: "json",
colNames: ['Name', 'Company Name', 'Responsible Name', 'Date/Time', 'Id'],
colModel: [{ name: 'GuestName', index: 'GuestName', width: 150, editable: true, editoptions: {readonly: true, size: 10} },
{ name: 'CompName', index: 'CompName', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
{ name: 'RespName', index: 'RespName', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
{ name: 'RegisterDate', index: 'RegisterDate', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
{ name: 'Register_Id', index: 'Register_Id', width: 100, align: 'left', formatter: checkboxFormatter },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: jQuery('#Userpager'),
sortname: 'Register_Id',
viewrecords: true,
sortorder: "desc",
imgpath: '/scripts/themes/steel/images',
caption: "Registered Users"
});
});
jQuery("#registerUsers").jqGrid('navGrid', '#Userpager', { edit: false, add: false, del: false });
function checkboxFormatter(el, cval, opts) {
debugger;
cval = cval + ""; cval = cval.toLowerCase();
// var bchk = cval.search(/(false|0|no|off|n)/i) < 0 ? " checked=\"checked\"" : "";
var UserId = jQuery("#registerUsers").getCell(RowId, 'Register_Id');
$(el).html("<center><img src='../images/gnome-session-logout.png' width='15px' height='15px' onclick=javascript:LogOutUser(" + UserId + ");/></center>");
// <input type='checkbox' onclick=\"ajaxSave('" + opts.rowId + "', this);\" " + bchk + " value='" + cval + "' offval='no' />
}
Please help me
请帮我
Thank You Ritz
谢谢丽兹
回答by Justin Moore
you can just return the img tag as a string in the formatter eg:
您可以在格式化程序中将 img 标记作为字符串返回，例如：
function unitsInStockFormatter(cellvalue, options, rowObject) {
var cellValueInt = parseInt(cellvalue);
if (cellValueInt > 10)
return "<img src='../../Content/images/ui-flag_green.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
else if (cellValueInt > 0)
return "<img src='../../Content/images/ui-flag_blue.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
else
return "<img src='../../Content/images/ui-flag_red.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
};
as described here: http://tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-formatting.html
如此处所述：http: //tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-formatting.html
回答by Justin Ethier
See can-you-have-images-or-any-custom-html-displayed-in-jquery-grid-jqgrid-cellsfor instructions on displaying images in cells.
有关在单元格中显示图像的说明，请参阅can-you-have-images-or-any-custom-html-displayed-in-jquery-grid-jqgrid-cells。
Basically, it looks like you may need to remove quotes from your src element.
基本上，您可能需要从 src 元素中删除引号。
回答by Mario Benitez
A simple solution could be made directly from the query:
可以直接从查询中得出一个简单的解决方案：
select idres, 'HTML-IMG-SRC=images/tick_' || reserved || '.png' as reserved, indate, outdate from table; -- querying postgres
选择 idres, 'HTML-IMG-SRC=images/tick_' || 保留 || '.png' 保留，过期，表中过时；-- 查询 postgres
Where reserved is 0 or 1 and reflects in the image file name "tick_1.png" or "tick_0.png" depending on the field's value of 'reserved'
保留是 0 或 1 并反映在图像文件名“tick_1.png”或“tick_0.png”中，具体取决于“保留”字段的值
Hope it helps
希望能帮助到你
回答by Paschalis
i found this solution.
我找到了这个解决方案。
If in your page you include only the table by inserting the scripts and stylesheets and after including grid.php page, you can format the cell to display image this way:
如果在您的页面中通过插入脚本和样式表仅包含表格，并且在包含 grid.php 页面后，您可以通过以下方式格式化单元格以显示图像：
Put the code below in your grid.php:
将下面的代码放在你的 grid.php 中：
$grid->setColProperty("COLUMN NAME", array("formatter"=>"js:formatImage"));
Then, put in a string variable, the java script for formatImage function this way:
然后，放入一个字符串变量，formatImage函数的java脚本这样：
$IMAGE_FORMAT_STRING = <<<IMAGE_FORMAT_FUNCTION
function formatImage(cellValue, options, rowObject) {
var imageHtml = "";
if(cellValue){
if(cellValue.indexOf("_thumb") == -1){
imageHtml = '<div><a href="' + cellValue + '" title="" target="_blank">' + cellValue + '</a></div>';
}else{
imageHtml = '<div class="gallery"><a href="' + cellValue.replace('_thumb', '') + '" title=""><img src="' + cellValue + '" width="50" height="50" alt="" border="0"/></a></div>';
}
}
return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
return $(cellObject.html()).attr("originalValue");
}
IMAGE_FORMAT_FUNCTION;
and above the grid->renderGrid, put set the JavaScript Code this way:
在 grid->renderGrid 上方，这样设置 JavaScript 代码：
$grid->setJSCode($IMAGE_FORMAT_STRING);
I hope it helps somebody!
我希望它可以帮助某人！
