将图像/图标添加为数据表中的行值

Add image/icon as a row value in datatables

本文关键字：数据表 图像 图标 添加      更新时间：2023-09-26

我需要在行的最后一列添加一个图像/图标。当我把鼠标悬停在那个图标上时，它应该有一个工具提示，应该显示来自服务器的数据。我不知道该如何实施。任何已经实现此功能的专家都请帮助我。提前感谢。

编辑

这是我拥有的示例数据，当悬停在上面时，我需要为最后一列添加一个图标，以显示工具提示中包含"数据"的工具提示。

{
    "iTotalRecords": 5,
    "sEcho": "1",
    "aaData": [
        [
            "V2993ASFKH230943",
            "Honda",
            "Accord",
            "data"
        ],
        [
            "V2993A39SNF30943",
            "Honda",
            "CRV",
            "data"
        ],
        [
            "V4833A39SNF30943",
            "Acura",
            "TSX"
        ],
        [
            "V4833RE9SNF30943",
            "Acura",
            "TL",
            "data"
        ],
        [
            "V9383RE9SNF30943",
            "Acura",
            "MDX",
            "data"
        ]
    ],
    "iTotalDisplayRecords": 5
}

[更新]

图像标签最终看起来像这样：

var imgTag = '<span class="mytext" ><span class="ui-icon ui-icon-wrench" ></span>';

一个要求也是在悬停时显示模式对话框。下面是打开模态的jquery代码。

$(".mytext").mouseover(
            function() {
                var width = 250;
                var height = 270;
                var posX = $(this).offset().left - $(document).scrollLeft()
                        - width + $(this).outerWidth();
                var posY = $(this).offset().top - $(document).scrollTop()
                        + $(this).outerHeight();
                //alert(posX + ", " +posY);
                $(".mytext").dialog({
                    resizable:false,
                    width : width,
                    height : height,
                    position : [ posX, posY ]
                });
            });

当我把鼠标悬停在它上面时，它不知何故不起作用。它不会触发jquery Modal

更新

你说得对，时间有问题。我解决了这个问题。现在，当我悬停在上面时，它正在将所有图像加载到模态中，即，我所拥有的行数就是打开的模态对话框的数量。我需要将值aData[3]传递给jquery模态。

这在一定程度上取决于工具提示的实现方式。每个第三方的"Fancy"JavaScript工具提示都会做不同的事情。这里的例子只是展示了如何获取两段数据（品牌和模型），并将它们推送到单元格的"标题"属性中，这将触发浏览器的内置工具提示。

我想你将使用一个工具提示插件或类似的东西，所以你必须采用示例的一般原则，并将它们适应特定的工具提示。好的，足够的序言。

--

这一切都将发生在fnRowCallback[update:1.10 forward只使用"rowCallback"]中，这是DataTables对象中的一个属性，您可以在初始化期间设置它。通过这样做，将发生的事情是，当每一行被呈现时，您有机会修改HTML（nRow），并在修改后返回它，以便将其推送到DOM中。

（注意：当它有助于可读性时，我倾向于制作比严格必要的更多的变量。我还保留了iDisplayIndex和iDisplayIndexFull。如果你想的话，你应该可以删除它们）

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var theMake = aData[1],
      theModel = aData[2];
  var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>'; 
  /* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */
  $('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup
  return nRow;
}

现在，当您将鼠标悬停在图像上时，工具提示将显示"生成"answers"模型"。

同样，这对特定的工具提示插件没有任何作用，尽管你可能使用的插件也可以从标题中获取信息，这会很方便。对于这些插件，您只需要向触发插件的imageTag（class="tooltip"或其他）添加一个类。

[更新]

因此，以jQueryUI的对话框为例：许多自定义对话框函数会动态创建一个"容器"节点，然后调用dialog()。我更喜欢在基础文档中有一个通用的可重用容器节点，然后在需要时填充它。

我喜欢在正文关闭之前把我的放在右边，因为当你完成它时，jQueryUI会把它粘在那里：

  <!-- ... -->
  <div id="dialogContainer"></div>
</body>

在CSS中，您可以将其设置为默认隐藏（#dialogContainer { display:none }）。

现在你有了容器，你可以在上面使用.dialog()函数。使用上面的原始示例（注意我已经向它添加了类"hoverImage"），你可以将aData[3]填充到图像的标题中，而不是我的示例中的任何内容。标题充当aData[3]数据的"存储"。

现在，在DataTables初始化的之外，在您的文档就绪函数（您可能已经有了一个）中，您可以绑定mouseenter事件：

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
  e.preventDefault; // if you want to prevent the browser tooltip
  var dialogContainer = $('#dialogContainer');
  dialogContainer.html(this.title); // replace contents of dialog with the title of the image
  dialogContainer.dialog({ /* options */ });
});

我没有尝试将图像数据本身存储在数据库中，而是将服务器上的图像存储在一个文件夹中，并将图像的地址存储在数据库。您还可以存储其他元信息，如高度、宽度和（正如您所提到的）alt文本。如果需要，您可以构建将图像上传到该文件夹的代码，当您上传图像时，您有机会将图像数据添加到数据库中。

相关文章：