将图像/图标添加为数据表中的行值 [英] Add image/icon as a row value in datatables
问题描述
我需要在该行的最后一列添加图像/图标。该图标应该有一个工具提示，当我悬停在它应该显示来自服务器的数据。我不知道如何实现这一点。任何执行此功能的专家都可以帮助我。感谢提前。
编辑
这是我拥有的示例数据我需要为最后一列添加一个图标，当在工具提示中显示一个带有数据的工具提示。
{
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）对话框（{
可调整大小：false，
width：
height：height，
position：[posX，posY]
}）;
}）;
当我悬停在这里时，这是不行的。它不触发jquery模态
更新
你是正确的时间问题。我解决了这个问题。现在，当我将鼠标悬停在其上时，将所有图像加载到模态中，即我所拥有的行数是打开的模态对话框的数量。我需要将值aData [3]传递给jquery模态。
这将取决于工具提示如何实施。每个第三方FancyJavaScript工具提示都会做不同的事情。这里的例子只是显示如何获取两个数据（make和model）并将它们推入单元格的title属性，这将触发浏览器的内置工具提示。
我想象你将要使用一个工具提示插件或者一些这样的插件，所以你必须遵循这个例子的一般原则，并适应具体的工具提示。好的，足够的前导。
-
这一切都会发生在fnRowCallback [更新：1.10正向只使用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.pngtitle ='+ theMake +''+ theModel +'class =hoverImage/>';
/ * result example：< img href =/ images / icon.pngtitle =Honda CRVclass =hoverImage/> * /
$（'td：eq（3）'，nRow）.html（imgTag）; //用新的图像标记替换data一词
return nRow;
}
现在，当您悬停图片时，工具提示将显示Make和Model。 / p>
再次，这并不对特定的工具提示插件做任何事情，尽管你可能使用的插件也可以从标题中获得信息，这将是方便的。对于这些插件，您只需要添加一个类来触发插件的imageTag（class =tooltip或其他任何内容）。
[update] / strong>
所以使用jQuery UI的对话框作为例子：许多自定义对话框函数即时创建一个容器节点，然后调用对话框（）就可以了。我喜欢在基本文档中有一个通用的可重复使用的容器节点，然后在需要时填充它。
我喜欢把我的身体关闭之前，因为这是当你完成它时，jQuery UI将会坚持下去：
<！ - ... - - >
< div id =dialogContainer>< / div>
< / body>
在您的CSS中，您可以将其设置为默认隐藏（ #dialogContainer {display：none} ）。
现在你有容器，可以使用 .dialog（） 函数就可以了。使用上面的原始示例（注意我已经添加了类hoverImage），您可以将aData [3]填充到图像的标题中，而不是我的示例中的任何内容。标题作为aData [3]数据的存储。
现在，完全在数据表初始化之外函数（你可能已经有一个），你可以绑定mouseenter事件：
$（'＃tableContainer' 'mouseenter'，'.hoverImage'，function（e）{
e.preventDefault; //如果你想阻止浏览器的工具提示
var dialogContainer = $（'＃dialogContainer'）;
dialogContainer.html（this.title）; //将对象的内容替换为图像的标题
dialogContainer.dialog（{/ * options * /}）;
}）;
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.
$(".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
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.
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.
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.
(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)
"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.
[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.
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:
<!-- ... -->
<div id="dialogContainer"></div>
</body>
In your CSS you would set it to be hidden by default ( #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.
Now, totally outside of the DataTables initialization, in your document ready function (you probably already have one), you could bind the mouseenter event:
$('#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 */ });
});
这篇关于将图像/图标添加为数据表中的行值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
