如何在“slickgrid”单元格中添加带有文本的图像？答案

【问题标题】：How can i add image with text in "slickgrid" cell?如何在“slickgrid”单元格中添加带有文本的图像？
【发布时间】：2015-01-19 15:13:32
【问题描述】：

我正在尝试通过使用光滑网格来实现“同一单元格中的文本和图像”。我没有找到任何符合我要求的答案。谁能回答我的问题...？

【问题讨论】：

标签： slickgrid

【解决方案1】：

单元格自定义通常通过formatters 处理。

注意row height 可以通过grid options 设置，但will be static，因此如果图像大小不同，您将需要一些繁重的渲染自定义，或者可能需要不同的网格框架。

 
var grid;
var data = [{id: 1, src: 'http://i.stack.imgur.com/Cj07W.jpg?s=128&g=1', txt: 'Some text' }, {id: 2, src: 'https://www.gravatar.com/avatar/4a7ca5a83afc1e7a43bf518ccaa3c9be?s=128&d=identicon&r=PG&f=1', txt: 'Some different text' }];
var columns = [
    {id: "id", name: "rowId", field: "id"},
    {id: "img", name: "Image", field: "src", formatter: function(args){  return "<span>"+data[args].txt+"</span><br/><img src ='" + data[args].src + "'></img>" }}
];

var options = {
    enableCellNavigation: true,
    forceFitColumns: true,
    rowHeight: 175    
};

grid = new Slick.Grid("#myGrid", data, columns, options);

 <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
 <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>

<script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.core.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.grid.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.formatters.js'></script>
 
<div id="myGrid" style="width:600px;height:500px;"></div>

【讨论】：

我找到了一个例子mleibman.github.io/SlickGrid/examples/… 在这个例子中，当我的鼠标指向第二列标题时，它显示“帮助图像”......以同样的方式......我的要求是，我在第二列单元格中需要相同的行为.. 有可能....？
您应该使用此附加信息更新/编辑原始问题，因为它与我对所提问题的解释完全不同。您应该能够在标题单元格中看到的“正文”单元格中完成任何事情，但由于标题单元格功能已经实现并通过插件提供，因此您需要更多的实现。