时间戳

首页 > 解决方案 > 制表符修改图像路径

javascript - 制表符修改图像路径

问题描述

我正在尝试将路径附加到 Tabulator v3.2 ( http://tabulator.info/docs/3.2 ) 中的单元格值，该单元格值从 mySQL 表中提取，然后显示由完整图像路径表示的图像制表符单元格。我在 .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。目前它只是在单元格中输入完整路径+格式化程序，而不是生成图像标签并将其放入 src。

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

标签： javascripttabulator

解决方案

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

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

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

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

我们首先定义一个 mutator

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

然后在该列的列定义中，我们绑定 mutator 和 formatter

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

推荐阅读