在jqgrid列中添加图像
我想在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 '
'; }
我应该在哪里给图像src？ 如何提及colmodel中的imageformat？
谢谢
如果需要在图像的第一列中设置图像，则可以定义网格
$("#tableName").jqGrid({ ..... colNames: ['', ''], colModel: [ { name: 'someUniqueColumnName', width: 25, fixed: true, formatter: function () { return "
"; } }, { name: 'someValue', width: 123 // width of column in pixel } ], ... });
formatter只需返回一个字符串，该字符串是需要放在列中的HTML片段。 因为JavaScript中的所有参数都是可选的，我们不需要，所以我们可以将formatter定义为没有参数的函数。 属性width是以像素为单位的列的大小。 如果你使用其他jqGrid选项，如autowidth: true或指定网格的width选项的整个宽度 （如果你不使用shrinkToFit shrinkToFit: false选项），那么jqGrid将根据width属性的值缩放列宽colModel中的列。 为了没有缩放列的图像我包括fixed: true属性另外。
一些常见的评论：您应该小心JavaScript中的名称大小写。 例如，您发布的第一行代码（ jquery("#tableName").jqgrid({ ）应替换为jQuery("#tableName").jqGrid({ 。
您可以在url参数中通过xml或json移动图像，如下所示：
$image = "<a href='#'><img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'><a>"; echo ""; echo "".$page." "; echo "".$total_pages." "; echo "".$count." "; // be sure to put text data in CDATA echo ""; echo "| ". $image." | "; echo "
"; } echo "";
注意<是<
看这个例子:)
$("#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 $("![]()
").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 = $("").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/