自定义IgTree（Infragistics jquery控件）
我正在尝试使用 Infragistics jquery igTree 控件。我的要求是：当用户将鼠标悬停在任何子节点上时，我需要显示该节点的图像和工具提示。图像已显示，但未显示工具提示。我尝试模拟 http://jsfiddle.net/haFMn/17/ 中给出的代码，
但是它对我不起作用。 div 正在显示[在其原始位置]，但不在节点级别显示。谁能帮我解决这个问题。我粘贴 TreeView.cshtml 页面供您参考。 [如果想正确查看，需要更改图片路径]
//********* **起始代码************ ************
@{
ViewBag.Title = "TreeView";
}
<h2>TreeView</h2>
<script type="text/javascript">
$(document).ready(function () {
var offsetX = 20,
offsetY = 20;
$(".desc_hover").live('mouseenter', function (evt) {
var par = $(this).parent();
// if text is Tokyo Traders add image after node
//if ($(this).text() == "Tokyo Traders")
// if there is alredy added image do not add image again
if (par.find(">img").length < 2) {
var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
par.append(html);
}
var o = {
left: evt.pageX,
top: evt.pageY
};
$("#test").show().offset(o);
});
$(".desc_hover").live('mouseleave', function (evt, ui) {
var par = $(this).parent();
par.find($('#imgdiv')).remove();
$("#test").hide(2000);
});
var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
//creates new JSONP data source for OData
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
//Load on demand happens automatically using OData, the loadOnDemand option,
//and properly configured bindings ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
$("#tree1").igTree({
dataSource: jsonp,
dataSourceType: 'jsonp',
responseDataKey: 'd',
loadOnDemand: true,
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Products',
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Supplier',
bindings: {
textKey: 'Name',
valueKey: 'ID',
nodeContentTemplate: "<span data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
}
}
}
});
});
</script>
<div class="content clearfix">
<!-- side nav begins here -->
<div id = "test1" class="side-nav">
<div id="tree1">
<p>Anirban</p>
</div>
</div>
<!-- side nav ends here -->
<section class="main-box">
<hgroup>
<h1>
Infragistics TreeView Control</h1>
<h2>
Load on demand </h2>
<p>
The other grid will go here</p>
</hgroup>
<div class="sampleContainer">
<!--igTree target element-->
<div id="sampleContent">
</div>
</div>
</section>
<span id="test" style="display:none;">This is a test</span>
</div>
I am trying to use Infragistics jquery igTree control. My requirement is that: When the user hovers over any child node, I need to show an image and a tool-tip for that node. The image is showing up but not the tool tip. I tried to mock the code as given in http://jsfiddle.net/haFMn/17/
But it doesn't work for me. The div is getting displayed [at its original location] but not at the node level. Could anyone help me out in this. I am pasting the TreeView.cshtml page for your reference. [Image path need to be changed if you want to see them correctly]
//***********Start Code ************************
@{
ViewBag.Title = "TreeView";
}
<h2>TreeView</h2>
<script type="text/javascript">
$(document).ready(function () {
var offsetX = 20,
offsetY = 20;
$(".desc_hover").live('mouseenter', function (evt) {
var par = $(this).parent();
// if text is Tokyo Traders add image after node
//if ($(this).text() == "Tokyo Traders")
// if there is alredy added image do not add image again
if (par.find(">img").length < 2) {
var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
par.append(html);
}
var o = {
left: evt.pageX,
top: evt.pageY
};
$("#test").show().offset(o);
});
$(".desc_hover").live('mouseleave', function (evt, ui) {
var par = $(this).parent();
par.find($('#imgdiv')).remove();
$("#test").hide(2000);
});
var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
//creates new JSONP data source for OData
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
//Load on demand happens automatically using OData, the loadOnDemand option,
//and properly configured bindings ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
$("#tree1").igTree({
dataSource: jsonp,
dataSourceType: 'jsonp',
responseDataKey: 'd',
loadOnDemand: true,
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Products',
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Supplier',
bindings: {
textKey: 'Name',
valueKey: 'ID',
nodeContentTemplate: "<span data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
}
}
}
});
});
</script>
<div class="content clearfix">
<!-- side nav begins here -->
<div id = "test1" class="side-nav">
<div id="tree1">
<p>Anirban</p>
</div>
</div>
<!-- side nav ends here -->
<section class="main-box">
<hgroup>
<h1>
Infragistics TreeView Control</h1>
<h2>
Load on demand </h2>
<p>
The other grid will go here</p>
</hgroup>
<div class="sampleContainer">
<!--igTree target element-->
<div id="sampleContent">
</div>
</div>
</section>
<span id="test" style="display:none;">This is a test</span>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您检查过在线帮助吗？有工具提示和图像 url 选项。请查看以下链接，其中包含当前所有可用选项 - 链接< /a>
Have you checked the online help? There are options for tooltip and image url. Please take a look at the following link containing all the available at the moment options - link
将跨度连接到主体并使其绝对定位：
这应该可以解决跨度未重新定位的问题。
Attach the span to the body and make it position absolute:
This should resolve the issue that your having with the span not repositioning.