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

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

编辑

这是我的样本数据，我需要的时候在显示器徘徊在提示“数据”工具提示添加一个图标，最后一列。

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

UPDATE

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

来源

2012-03-25 user525146

关于模态对话框：您正在使用一个自我监听的事件绑定器，所以你有一个计时问题。您要绑定工具提示的元素在执行时不可用。您可以逐行执行绑定（不推荐）或将您的侦听器设置为祖先。在示例代码中，我没有看到模态内容设置的位置。它使用jQuery UI吗？（.dialog（）是一个常用的函数名称，但它在jQuery UI中）。该对话框实际上是模态的（需要动作）还是仅出现一个对话框？ – 2012-03-26 20:50:40

我正在抓我的头，将内容传递给模态。它只是一个对话框，但其内容为aData [3]。 – user525146 2012-03-27 13:13:19

以示例更新我的回答 – 2012-03-27 14:09:22

这将取决于如何实施工具提示。每个第三方的“Fancy”JavaScript工具提示都会以不同的方式做事。这里的例子只是展示了如何获取两部分数据（make和model）并将它们推入单元格的“title”属性中，这将触发浏览器的内置工具提示。

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

这一切会在fnRowCallback 发生[更新：1.10向前只是使用“rowCallback”]，这是在数据表对象的属性，你可以在初始化过程中设置。通过这样做，会发生什么情况是，每行呈现后，您都有机会修改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()。我更喜欢在基础文档中有一个通用的可重用容器节点，然后在需要时填充它。

我喜欢把我的身体关闭前，因为这是jQuery UI的是要坚持它，当你用它无论如何做：

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

在你的CSS，你将其设置为默认隐藏（#dialogContainer { display:none }）。

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

现在，外面的数据表初始化完全，在您的文档准备功能（你可能已经有一个），你可以在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-26 17:38:25

我真的很抱歉打扰你。我从jquery ui中获得了图像，当我将鼠标悬停在它上面时，应该用jquery模态UI来触发它。从上面的示例中，如果我调用fnRowCallBack中的模式，模式将在页面加载时打开，但不会在我将鼠标悬停在图像上时打开。 – user525146 2012-03-27 14:32:39

这是一个不好的例子。我已经更新了它。希望它会更好，但我现在可能正忙于在这里写出体面的代码。 ;-) – 2012-03-27 14:47:45

非常感谢你..它的工作对我来说有一些调整.. – user525146 2012-03-27 20:46:59

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

来源

2012-03-26 17:35:36

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

回答

相关问题