2

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

编辑

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

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

4

2 回答 2

3

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

我想您将使用工具提示插件或类似的工具，因此您必须采用示例的一般原则并将它们调整为特定的工具提示。好的，足够的序言。

--

这一切都将发生在 fnRowCallback [update: 1.10 forward just uses "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;
}

现在，当您将图像悬停时，工具提示将显示品牌和型号。

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

[更新]

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

我喜欢在 body 关闭之前放我的，因为无论如何，当你完成它时，jQuery UI 会坚持它：

  <!-- ... -->
  <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 */ });
});
于 2012-03-26T17:38:25.683 回答
0

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

于 2012-03-26T17:35:36.513 回答