制表符修改图像路径

Question

我正在尝试将路径附加到从 mySQL table 中提取的 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' w/in 函数。 if 语句中的变量确实解析为 true。目前它只是在单元格中输入完整路径+格式化程序，而不是生成图像标签并将其放入src。

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

Answer 1

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

为了显示图像，您需要 return 将路径设置为源的图像元素：

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 更新进入 table 的路径值，然后使用内置图像格式化程序显示数据。

在下面的示例中，我假设路径包含在行数据

的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 },

制表符修改图像路径

Tabulator Modify Image Path

javascript

tabulator

突变选择