制表符修改图像路径 替代突变

编程问答 2022-08-14

问题描述

我试图将路径添加到Tabulator v3.2（http://tabulator.info/docs/3.2）内的单元格值上，该路径是从MysqL表中提取的，然后在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;
}

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

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

解决方法

问题是因为您只返回显示的路径的字符串。

要显示图像，您需要返回一个图像元素，并将其路径设置为其来源：

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
}

替代突变

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

在下面的示例中，我假设路径包含在行数据的 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 },
javascripttabulator