Question

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

修改

这是我的样本数据，我需要在悬停时为最后一列添加一个图标，在工具提示中显示带有“数据”的工具提示。

{
    "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模态。

Answer 1

这取决于工具提示的实施方式。每个第三方＆＃34; Fancy＆＃34; JavaScript工具提示将以不同的方式执行操作。这里的例子只是展示如何获取两个数据（品牌和型号）并将它们推入＆＃34;标题＆＃34;单元格的属性，它将触发浏览器的内置工具提示。

我想你会使用工具提示插件或其他一些插件，所以你必须采用示例的一般原则并使它们适应特定的工具提示。好的，足够的序言。

-

这一切都将发生在fnRowCallback [更新：1.10转发只使用＆＃34; rowCallback＆＃34;] ，这是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;
}

现在，当您将鼠标悬停在图像上时，工具提示将显示“制作和模型”。

同样，对于特定的工具提示插件，这并没有做任何事情，尽管您可能正在使用一个插件，该插件也可以从标题中获取信息，这将非常方便。对于这些插件，您只需要在触发插件的imageTag（class =＆＃34; tooltip＆＃34;或其他）中添加一个类。

<强> [更新]

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

我喜欢在我的身体关闭之前把它放好，因为当你完成它时，jQuery UI将会坚持下去：

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

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

现在您已拥有容器，您可以在其上使用.dialog()功能。使用上面的原始示例（注意我已经将类＆＃34; hoverImage＆＃34;添加到它中），您将aData [3]填充到图像的标题中而不是我的任何内容中。例。标题是＆＃34;存储＆＃34;对于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 */ });
});

Answer 2

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

在数据表中添加图像/图标作为行值

2 个答案: