Как я могу добавить изображение с текстом в ячейку «slickgrid»?

Question

Я пытаюсь реализовать «текст и изображение в той же ячейке, используя слабую сетку». Я не нашел ответа на мои требования. Может ли кто-нибудь ответить на мой вопрос ...?

Answer 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>