javascript 在数据表中添加图像/图标作为行值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9864337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add image/icon as a row value in datatables
提问by user525146
I need to add an image/icon to the last column in the row. And that icon should have a tooltip when I hover on it should display data from the server. I am not sure how to implement this. Any experts who has implemented this feature please help me. Thanks in advance.
我需要在行的最后一列添加一个图像/图标。当我将鼠标悬停在该图标上时，该图标应该有一个工具提示，它应该显示来自服务器的数据。我不确定如何实现这一点。任何已实现此功能的专家请帮助我。提前致谢。
EDIT
编辑
This is the sample data I have and I need to add an icon for the last column when hovered over displays a tooltip with the "data" in tooltip.
这是我拥有的示例数据，当将鼠标悬停在工具提示中显示带有“数据”的工具提示时，我需要为最后一列添加一个图标。
{
"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
}
[update]
[更新]
The image tag ends up looking like this:
图像标签最终看起来像这样：
var imgTag = '<span class="mytext" ><span class="ui-icon ui-icon-wrench" ></span>';
A requirement is also to have modal dialog appear on hover. Below is the jquery code to open the modal.
还要求在悬停时显示模态对话框。下面是打开模态的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 ]
});
});
This is somehow not working, when I hover on it. Its not triggering the jquery Modal
当我悬停在它上面时，这在某种程度上不起作用。它不会触发 jquery 模态
UPDATE
更新
You are correct there is a timing issue. I fixed that issue. Now when I hover on it is loading up all the images into the modal i.e., the number of rows I have are the number of modal dialogs that are opened. I need to pass the value aData[3] to the jquery modal.
你是对的，有一个时间问题。我解决了那个问题。现在，当我将鼠标悬停在它上面时，会将所有图像加载到模态中，即，我拥有的行数是打开的模态对话框的数量。我需要将值 aData[3] 传递给 jquery 模式。
回答by Greg Pettit
It would depend a little on how the tooltip is implemented. Each 3rd-party "Fancy" JavaScript tooltip will do things differently. The example here is just showing how to take two pieces of the data (make and model) and push them into the "title" attribute of the cell, which will trigger a browser's built-in tooltips.
这将在一定程度上取决于工具提示的实现方式。每个 3rd-party “Fancy” JavaScript tooltip 都会以不同的方式做事。这里的示例只是展示了如何获取两部分数据（品牌和模型）并将它们推送到单元格的“标题”属性中，这将触发浏览器的内置工具提示。
I imagine you're going to be using a tooltip plugin or somesuch, so you'll have to take the general principles of the example and adapt them to the specific tooltip. OK, enough preamble.
我想您将使用工具提示插件或类似插件，因此您必须采用示例的一般原则并将它们调整为特定的工具提示。好的，足够的序言。
--
——
This is all going to happen in the fnRowCallback [update: 1.10 forward just uses "rowCallback"], which is a property in the DataTables object that you can set during initialization. By doing this, what will happen is that as each row is rendered, you have the opportunity to modify the HTML (the nRow) and return it after modification so that it can be pushed into the DOM.
这一切都将发生在 fnRowCallback [update: 1.10 forward just uses "rowCallback"] 中，这是 DataTables 对象中的一个属性，您可以在初始化期间设置它。通过这样做，将会发生的情况是，随着每一行的呈现，您有机会修改 HTML（nRow）并在修改后返回它，以便将其推送到 DOM 中。
(note: when it helps readability, I tend to make more variables than are strictly necessary. I also keep the iDisplayIndex and iDisplayIndexFull lying around. You should be able to remove them if you want)
（注意：当它有助于可读性时，我倾向于创建比严格必要的更多的变量。我还保留 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;
}
Now when you hover the image, the tooltip will show Make and Model.
现在，当您将鼠标悬停在图像上时，工具提示将显示品牌和型号。
Again, this doesn't do anything for a specific tooltip plugin, though your may be using a plugin that also gets its information from the title, which would be handy. For those plugins, you just need to add a class to the imageTag (class="tooltip" or whatever) that triggers the plugin.
同样，这对特定的工具提示插件没有任何作用，尽管您可能正在使用一个也从标题中获取其信息的插件，这会很方便。对于这些插件，您只需要向触发插件的 imageTag（class="tooltip" 或其他）添加一个类。
[update]
[更新]
So using jQuery UI's dialog as an example: many custom dialog functions create a "container" node on the fly, and then call dialog()on it. I prefer to have a generic re-usable container node in the base document, then populate it when needed.
所以以 jQuery UI 的对话框为例：许多自定义对话框函数动态创建一个“容器”节点，然后调用dialog()它。我更喜欢在基础文档中有一个通用的可重用容器节点，然后在需要时填充它。
I like to put mine right before the body closes, because that's where jQuery UI is going to stick it when you're done with it anyhow:
我喜欢把我的放在 body 关闭之前，因为无论如何，当你完成它时，jQuery UI 会坚持它：
<!-- ... -->
<div id="dialogContainer"></div>
</body>
In your CSS you would set it to be hidden by default ( #dialogContainer { display:none }).
在您的 CSS 中，您可以将其设置为默认隐藏 ( #dialogContainer { display:none })。
Now that you have the container, you can use the .dialog()function on it. Using the original example further above (note I've added the class "hoverImage" to it), you would populate aData[3] into the title of the image instead of whatever's in my example. The title is acting as "storage" for aData[3] data.
现在您有了容器，就可以.dialog()在其上使用该函数了。使用上面的原始示例（请注意，我已经向其中添加了类“hoverImage”），您可以将 aData[3] 填充到图像的标题中，而不是我的示例中的任何内容。标题充当 aData[3] 数据的“存储”。
Now, totally outsideof the DataTables initialization, in your document ready function (you probably already have one), you could bind the mouseenter event:
现在，完全在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 */ });
});
回答by Surreal Dreams
Rather than try to store the image data itself in the database, I store images on the server in a folder and store the address of the image in the database. You can also store other meta info like height, width and - as you mention - alt text. If you need to you can build the code to upload the images to that folder, and when you upload them you have the opportunity to add the image data to the database.
我没有尝试将图像数据本身存储在数据库中，而是将图像存储在服务器上的文件夹中，并将图像的地址存储在数据库中。您还可以存储其他元信息，如高度、宽度和 - 正如您提到的 - 替代文本。如果需要，您可以构建代码将图像上传到该文件夹，并且当您上传它们时，您有机会将图像数据添加到数据库中。
