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

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

编辑

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

{ "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 = ''; 

还需要在hover时显示modal dialog。 下面是打开模态的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 ] }); }); 

当我hover在它上面时，这在某种程度上是行不通的。 它不会触发jquery Modal

UPDATE

你是对的，有时间问题。 我解决了这个问题。 现在，当我将鼠标hover在它上面时，将所有图像加载到模态中，即，我拥有的行数是打开的modal dialog的数量。 我需要将值aData [3]传递给jquery模式。

Answer 1

这将取决于工具提示的实施方式。 每个第三方“Fancy”JavaScript工具提示都会以不同的方式执行操作。 这里的示例仅显示如何获取两个数据（make和model）并将它们推入单元格的“title”属性，这将触发浏览器的内置工具提示。

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

–

这一切都将在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 = ''; /* result example:  */ $('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup return nRow; } 

现在当您hover图像时，工具提示将显示Make和Model。

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

[更新]

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

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

在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 */ }); }); 

Answer 2

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