Question

我正试图通过使用光滑网格＆＃34;在同一单元格中实现文本和图像。我的要求没有找到任何答案。任何人都可以回答我的问题......？

Answer 1

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

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

＆＃13;

 
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);

＆＃13;

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

＆＃13;

如何在＆＃34; slickgrid＆＃34;中添加带有文本的图像？细胞？

1 个答案: