"slickgrid"셀에 텍스트가있는 이미지를 추가하려면 어떻게합니까?

Question

"매끄러운 격자를 사용하여 동일한 셀에 텍스트 및 이미지"를 구현하려고합니다. 내 요구 사항에 대한 답을 찾지 못했습니다. 아무도 내 질문에 대답 할 수 ...?

Answer 1

일반적으로 셀 사용자 정의는 formatters을 통해 처리됩니다.

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>