本文介绍了如何为Treeview节点自定义工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有树视图.如果我将鼠标悬停在子节点上,则有关该节点的描述将显示在工具提示上.
一切正常.但是工具提示没有根据页面正确定制.我将在下面粘贴源代码,
Hi,
I am having a tree view. If i keep the mouse over a child node, then the description about the node will appear on a tooltip.
everything is working fine,. But the tooltip is not customized properly acording to the page. I ll paste the source code below,
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RFPTemplate.aspx.cs" Inherits="SOW.RFPTemplate" %>
<%@ Register TagPrefix="Ajx" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/qTip.js" type="text/javascript">
function showToolTip(e) {
debugger;
TreeNode theNode = this.treeView1.GetNodeAt(e.X, e.Y);
// Set a ToolTip only if the mouse pointer is actually paused on a node.
if ((theNode != null))
{
// Verify that the tag property is not "null".
if (theNode.Tag != null)
{
// Change the ToolTip only if the pointer moved to a new node.
if (theNode.Tag.ToString()!=this.toolTip1.GetToolTip(this.treeView1))
{
this.toolTip1.SetToolTip(this.treeView1, theNode.Tag.ToString());
}
}
else
{
this.toolTip1.SetToolTip(this.treeView1, "");
}
}
else // Pointer is not over a node so clear the ToolTip.
{
this.toolTip1.SetToolTip(this.treeView1, "");
}
}
</script>
<script type="text/javascript" >
// $("#tree a[title]").tooltip()
var TREEVIEW_ID = "TreeView1"; //the ID of the TreeView control
//the constants used by GetNodeIndex()
var LINK = 0;
var CHECKBOX = 1;
//this function is executed whenever user clicks on the node text
function ToggleCheckBox(senderId) {
debugger;
var nodeIndex = GetNodeIndex(senderId, LINK);
alert(senderId);
var checkBoxId = TREEVIEW_ID + "n" + nodeIndex + "CheckBox";
var checkBox = document.getElementById(checkBoxId);
checkBox.checked = !checkBox.checked;
ToggleChildCheckBoxes(checkBox);
ToggleParentCheckBox(checkBox);
}
//checkbox click event handler
function checkBox_Click(eventElement) {
ToggleChildCheckBoxes(eventElement.target);
ToggleParentCheckBox(eventElement.target);
}
//returns the index of the clicked link or the checkbox
function GetNodeIndex(elementId, elementType) {
var nodeIndex;
if (elementType == LINK) {
nodeIndex = elementId.substring((TREEVIEW_ID + "t").length);
}
else if (elementType == CHECKBOX) {
nodeIndex = elementId.substring((TREEVIEW_ID + "n").length, elementId.indexOf("CheckBox"));
}
return nodeIndex;
}
function ClientValidate() {
if (document.getElementById(''RFPPlaceHolder_txtCustomer'').value == "") {
alert("Please enter Customer name");
document.getElementById(''RFPPlaceHolder_txtCustomer'').focus();
return false;
}
if (document.getElementById(''RFPPlaceHolder_Txtcrm'').value == "") {
alert("Please enter CRM ID");
document.getElementById(''RFPPlaceHolder_Txtcrm'').focus();
return false;
}
if (document.getElementById(''RFPPlaceHolder_txtEnddt'').value == "") {
alert("Please enter End Date");
document.getElementById(''RFPPlaceHolder_txtEnddt'').focus();
return false;
}
var treeView = document.getElementById("<%= TVContent.ClientID %>");
var checkBoxes = treeView.getElementsByTagName("input");
var checkedCount = 0;
for (var i = 0; i < checkBoxes.length; i++)
{ if (checkBoxes[i].checked) { checkedCount++; } }
if (checkedCount > 0) {
return true;
}
else {
alert("Please Select any Table of content");
return false;
}
}
//checks or unchecks the nested checkboxes
function ToggleChildCheckBoxes(checkBox) {
debugger;
var postfix = "n";
var childContainerId = TREEVIEW_ID + postfix + GetNodeIndex(checkBox.id, CHECKBOX) + "Nodes";
alert(childContainer);
var childContainer = document.getElementById(childContainerId);
if (childContainer) {
var childCheckBoxes = childContainer.getElementsByTagName("input");
for (var i = 0; i < childCheckBoxes.length; i++) {
childCheckBoxes[i].checked = checkBox.checked;
}
}
}
//unchecks the parent checkboxes if the current one is unchecked
function ToggleParentCheckBox(checkBox) {
if (checkBox.checked == false) {
var parentContainer = GetParentNodeById(checkBox, TREEVIEW_ID);
alert(parentContainer);
if (parentContainer) {
var parentCheckBoxId = parentContainer.id.substring(0, parentContainer.id.search("Nodes")) + "CheckBox";
if ($get(parentCheckBoxId) && $get(parentCheckBoxId).type == "checkbox") {
$get(parentCheckBoxId).checked = false;
ToggleParentCheckBox($get(parentCheckBoxId));
}
}
}
}
//returns the ID of the parent container if the current checkbox is unchecked
function GetParentNodeById(element, id) {
var parent = element.parentNode;
if (parent == null) {
return false;
}
if (parent.id.search(id) == -1) {
return GetParentNodeById(parent, id);
}
else {
return parent;
}
}
function OnTreeClick(evt) {
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
if (isChkBoxClick) {
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
//check if nxt sibling is not null & is an element node
if (nxtSibling && nxtSibling.nodeType == 1) {
if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}
function CheckUncheckChildren(childContainer, check) {
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
for (var i = 0; i < childChkBoxCount; i++) {
childChkBoxes[i].checked = check;
}
// TreeviewExpandCollapseNode(childContainer, true)
}
function CheckUncheckParents(srcChild, check) {
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;
if (parentNodeTable) {
var checkUncheckSwitch = true; ;
if (check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if (isAllSiblingsChecked) {
// TreeviewExpandCollapseAll(''RFPPlaceHolder_TreeView1'', true);
//
checkUncheckSwitch = true;
}
else
// TreeviewExpandCollapseAll(''RFPPlaceHolder_TreeView1'', true);
checkUncheckSwitch = true; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
var isAllSiblingsChecked = AreAllSiblingsUnChecked(srcChild);
if (isAllSiblingsChecked) {
checkUncheckSwitch = false;
}
else
checkUncheckSwitch = true;
}
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if (inpElemsInParentTable.length > 0) {
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function AreAllSiblingsChecked(chkBox) {
// var displayState = (expandAll == true ? "none" : "block");
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
for (var i = 0; i < childCount; i++) {
if (parentDiv.childNodes[i].nodeType == 1) {
//check if the child node is an element node
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if (!prevChkBox.checked) {
return false;
}
}
}
}
return true;
}
function AreAllSiblingsUnChecked(chkBox) {
// var displayState = (expandAll == true ? "none" : "block");
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
for (var i = 0; i < childCount; i++) {
if (parentDiv.childNodes[i].nodeType == 1) {
//check if the child node is an element node
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if (prevChkBox.checked) {
return false;
}
}
}
}
return true;
}
//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj) {
var parent = childElementObj.parentNode;
while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
parent = parent.parentNode;
}
return parent;
}
function TreeviewExpandCollapseAll(treeViewId, expandAll) {
var displayState = (expandAll == true ? "none" : "block");
var treeView = document.getElementById(''RFPPlaceHolder_TreeView1'');
if (treeView) {
var treeLinks = treeView.getElementsByTagName("a");
var nodeCount = treeLinks.length;
for (i = 0; i < nodeCount; i++) {
if (treeLinks[i].firstChild.tagName) {
if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
var currentToggleLink = treeLinks[i];
var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
if (childContainer != null) {
if (childContainer.style.display == displayState) {
eval(currentToggleLink.href);
}
}
}
}
} //for loop ends
}
}
function compareDate(sender, args)
{
var selectedDate = new Date();
selectedDate = sender._selectedDate;
var todayDate = new Date();
if (selectedDate.getDateOnly() < todayDate.getDateOnly()) {
sender._selectedDate = todayDate;
sender._textbox.set_Value(sender._selectedDate.format(sender._format));
sender._textbox.set_Value("");
alert("Date Cannot be lesser then Req date");
return false;
}
}
function TreeviewExpandCollapseNode(childContainer, expandAll) {
var inpSelectedNode = document.getElementById("RFPPlaceHolder_TreeView1_SelectedNode");
var treeView = document.getElementById(''RFPPlaceHolder_TreeView1'');
var treeLinks = treeView.getElementsByTagName("a");
var currentToggleLink = treeLinks[inpSelectedNode];
var displayState = (expandAll == true ? "none" : "block");
if (childContainer != null) {
if (childContainer.style.display == displayState) {
eval(currentToggleLink.href);
}
}
}
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
if (links[i].className == TREEVIEW_ID + "_0") {
}
}
var checkBoxes = document.getElementsByTagName("input");
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].type == "checkbox") {
$addHandler(checkBoxes[i], "click", checkBox_Click);
}
}
function IsValidChars(e) {
e = e || window.event;
ch = e.which || e.keyCode;
var iChars = "!@#$%^&*()+=-\\\'';,./{}|\":<>?";
// var iChars = "\\\'':*?/\"<>|";
for (var i = 0; i < iChars.length; i++) {
if (iChars.charCodeAt(i) == ch) {
// document.getElementById(''NotifyMsg'').setAttribute(''class'', ''mandaMsg'');
alert("Special characters are not allowed");
return false;
}
}
return true;
}
</script>
<script type="text/javascript">
var oPopup = window.createPopup();
function richToolTip(Target) {
var lefter = event.offsetY + 0;
var topper = event.offsetX + 15;
oPopup.document.body.innerHTML = ''<div style="removed: absolute; removed 0; removed 0;'' +
'' border: 2px solid black; '' +
''font: normal 10pt tahoma; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,'' +
'' StartColorStr=gold, EndColorStr=#FFFFFF); padding: 10px;">'' +
''Node Name<hr style="border: 1px solid black;"> Node Name:'' +
Target.innerText +
''<br/><img src="http://peoplewithmedicare.tmf.org/Portals/17/Icons/icon_excel.jpg" alt="Image"></img> <br/>'' +
''<hr style="border: 1px solid black;"></div>'';
oPopup.show(topper, lefter, 170, 120, RFPPlaceHolder_TVContent);
}
function AddAttributes() {
debugger;
var TreeNodes = RFPPlaceHolder_TVContent.getElementsByTagName(''TABLE'');
for (var i = 0; i < TreeNodes.length; i++) {
TreeNodes[i].onmouseover = function setToolTip() { richToolTip(this); };
TreeNodes[i]. önmouseout = function removeToolTip() { oPopup.hide(); };
}
}
</script>
<link href="Styles/RFPStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1
{
width: 88px;
}
.style2
{
width: 87px;
}
.style3
{
width: 79px;
}
.style4
{
width: 250px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="RFPPlaceHolder" runat="server">
<div id="maincontent"><!-- InstanceBeginEditable name="EditRegion3" -->
<div id="maincontent-full" class="mainformcontainer">
<fieldset><legend><samp class="heading">RFP Details</samp></legend>
<table width="830" height="30px"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90">Customer Name</td>
<td width="130"><asp:TextBox ID="txtCustomer" ToolTip="Enter Customer Name"
runat="server" TabIndex="1" Width="170px" /></td>
<td width="90">CRM-ID</td>
<td width="130">
<asp:TextBox ID="Txtcrm" ToolTip="Enter CRM ID"
runat="server" TabIndex="2" Width="170px"/></td>
<td width="90">Business unit</td>
<td width="130">
<asp:TextBox ID="Txtbusinessunit" ToolTip="Enter Buisness unit"
runat="server" TabIndex="3" Width="170px" /></td>
</tr>
</table>
</fieldset>
<br />
<fieldset><legend><samp class="heading">Solution Area</samp></legend>
<table width="830" height="60px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" class="style5">Solutions</td>
<td class="style1" > <asp:UpdatePanel ID="upConsolidationDeptSummary" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" Width="175" height="23"
AutoPostBack="true" ID="DDSolutions" TabIndex="4" ></asp:DropDownList></ContentTemplate> </asp:UpdatePanel> </td>
<td width="90" class="style5" >Sub-Solutions</td>
<td class="style2" > <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" Width="175" height="23"
AutoPostBack="true" ID="DdSubSolutions" OnSelectedIndexChanged="DdSubSolutions_Changed" TabIndex="5" ></asp:DropDownList></ContentTemplate></asp:UpdatePanel> </td>
<td class="style3">Category</td>
<td width="130" class="style5">
<asp:TextBox runat="server" ID="txtCategory" ToolTip="Enter Category"
TabIndex="6" Width="170" style="margin-left: 0px"/></td>
</tr>
<tr>
<td >Deal Size</td>
<td class="style1" >
<asp:TextBox runat="server" ID="txtDealsize" ToolTip="Enter Buisness unit"
TabIndex="7" Width="170" /></td>
<td>RFP.Req.Date</td>
<td class="style2" ><asp:TextBox ID="txtdate" runat="server" Width="170px"
TabIndex="8" ></asp:TextBox><Ajx:CalendarExtender ID="CalendarExtender2" TargetControlID="txtdate" runat="server" ></Ajx:CalendarExtender></td>
<td class="style3" >RFP.Due.Date</td>
<td ><asp:TextBox ID="txtEnddt" runat="server" Width="170px" TabIndex="9" ></asp:TextBox><Ajx:CalendarExtender ID="CalendarExtender1" OnClientDateSelectionChanged=" compareDate" TargetControlID="txtEnddt" runat="server" ></Ajx:CalendarExtender></td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend><samp class="heading">Table of Content Details</samp></legend>
<div id="item_1" class="item">
<div class="formtree">
<table width="400" border="0" cellspacing="0" cellpadding="1">
<tr><td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:TreeView ForeColor=Black ID="TVContent" runat="server" ShowCheckBoxes="All" ExpandDepth=0 >
<Nodes > </Nodes>
<LevelStyles> <asp:TreeNodeStyle CssClass="tooltip_description" /> </LevelStyles>
</asp:TreeView>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</div>
<div id="content-bottom">
<table border="0" cellspacing="0" cellpadding="0" style="height: 53px; width: 200px">
<tr>
<td align="left" class="style4">
<asp:Label runat="server" ID="Label1" Text="Selected Solution:"/>
</td>
<td align="left "class="style4" >
<asp:Label runat="server" ID="lblSelectedSolution" />
</td>
</tr>
</table>
</div>
</fieldset>
<div class="buttons">
<asp:ImageButton ID="Btngenerate" OnClientClick="return ClientValidate();"
ImageUrl="images/generate.jpg" onclick="Btngenerate_Click" runat="server"
width="80" height="31" TabIndex="10" /> <img src="images/cancel.jpg" width="80" height="31" />
</div>
</div>
<!-- InstanceEndEditable --></div>
</asp:Content>
样式在这里
And the style is here
div#qTip {
padding: 3px;
border: 1px solid #666;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
请帮助解决它
Please help to solve it
推荐答案
这篇关于如何为Treeview节点自定义工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!