Question

我想知道制表器单元是否可以显示图像阵列，我尝试查看文档或其他类似问题，但并没有取得太大的成就。

我猜想这与自定义格式化程序有关。

假设我有一个指示图像位置的json数组，我该如何解决将它们放入单元格的问题？

尽管使用img标签在html中很容易实现，但是我只是不明白如何在Tabulator中使用自定义格式化程序来做到这一点。

一个例子将不胜感激。

Answer 1

我今天也遇到了同样的问题，并且找到了解决方案。

首先，这是我的数据：

var tabledata = [
    {id:1, picture:""},
    {id:2, picture:"img0.jpg"},
    {id:3, picture:"img1.jpg;img2.jpg;img3.jpg;img4.jpg"}
];

这是我用来生成列的代码：

{
    title: "Photos", field: "picture", 
    formatter: function (cell, formatterParams) {
        var div = $('<div>');
        var all_pictures = cell.getValue().split(';');
        for (var i=0; i<all_pictures.length; i++) {
            var img = $("<img src='" + all_pictures[i] + "'/>");

            // If you want to give your pictures a fixed width
            img.width(parseInt(formatterParams.width));


            div.append(img);

            // Adapt the height of the cell to the height of the images
            img.on("load", function(){
                cell.getRow().normalizeHeight();
            })
        }
        return div[0];
    }, 
    formatterParams:{width:"50px"},
    variableHeight:true
}

基本上，对于每张图片，您都必须创建一个html img并将图像放置在一个div中（该函数必须最多返回一个html元素，因此您不能仅返回多个<img/>）。我使用了jQuery，但此方法也适用于普通js。另外，我将源存储在一个字符串中，然后将其拆分为一个数组，但是代码应与json数组类似地工作。

img.on('load' ... )部分不是必需的，但是如果没有它，则单元格的高度将无法适应图像，因此它们可能不会完全显示。

希望这会有所帮助！

细胞内的图像阵列？

1 个答案: