表格修改图像路径

Question

我试图在Tabulator v3.2(http://tabulator.info/docs/3.2(，然后在Tabulator单元格中显示由完整图像路径表示的图像。我在.tabulator调用的属性中有这个：

formatter: function(cell, formatterParams) {
var celli=cell.getValue();
if ((celli.indexOf("blankimg") == -1) && (messages["custimgpath"] != "")) {
var cellf = messages["custimgpath"] + celli + ","image""
}
else {
var cellf = celli
}

return cellf;
}

正如你所看到的，我试图在函数中将格式设置为"image"。if语句中的变量确实解析为true。目前，它只是在单元格中输入完整路径+格式化程序，而不是生成图像标记并将其放入src中。

如何修改它以在图像标记中插入完整路径，并将格式化程序设置为图像？

Answer 1

问题是因为您只返回路径的字符串，这就是显示的内容。

为了显示图像，您需要返回一个以路径设置为源的图像元素：

formatter: function(cell, formatterParams) {
var celli=cell.getValue();
var imgEl = document.createElement("img"); //create image element
if ((celli.indexOf("blankimg") == -1) && (messages["custimgpath"] != "")) {
imgEl.src = messages["custimgpath"] + celli;  //set src of image element
}
else {
imgEl.src = celli; //set src of image element
}

return imgEl; //return image element
}

突变备选方案

作为替代方案，我建议在路径值进入表时使用赋值器更新路径值，然后使用内置的图像格式化程序显示数据。

在下面的示例中，我将假定路径包含在行数据的demo字段中

我们首先定义一个突变

var pathMutator = (value, data, type, mutatorParams, cell){
if ((value.indexOf("blankimg") == -1) && (messages["custimgpath"] != "")) {
return messages["custimgpath"] + value
}
else {
return imgEl.src = value;
}
}

然后在该列的列定义中，我们将赋值器和格式化程序绑定在一起

{title:"Demo Column", field:"demo", formatter:"image", mutator:pathMutator },