鼠标悬停在树视图节点上将显示一个弹出窗口，该弹出窗口从数据集中获取内容

问题描述：

我已经从数据集中创建了一个树形树视图和绑定树形视图.我想在鼠标悬停在树形视图节点上的弹出窗口中显示树形视图的内容.我对数据集中的每个节点都有一些描述将它们显示在鼠标上方的弹出窗口中??弹出窗口必须从数据集中提取其内容，而不仅仅是通过node.tooltip =''sometext''.dat可能吗?请帮忙！TQ

hi I ve created a asp tree view and binded tree view from a dataset .I want to show the content of tree view in a pop up on mouse over tree view nodes.I have some description for each node in the dataset how to show them in a pop on mouse over?? The pop up has to pull its contents from the dataset.its not just thro'' node.tooltip="sometext".Is dat possible?? pls help!TQ

答

您可以将css类用于treenodes，将弹出式目录的内容插入到每个TreeNode的隐藏div中，并使用jquery或javascript显示悬停时的div内容.

我正在提供示例，以便您理解我的意思.

You can use a css class for treenodes, Insert the content for the popup within a hidden div to each TreeNode and use jquery or javascript to display the divs content on hover.

I am providing a sample so you understand what i mean.

<asp:TreeView ID="LinksTreeView" runat="server" OnTreeNodeDataBound="Data_Bound" >            
            <NodeStyle CssClass="TreeItem" />
        </asp:TreeView>

请注意添加的NodeStyle. CSS类"TreeItem"被添加到为树视图的每个节点呈现的锚标记中.稍后，我们使用此类通过jquery将悬停函数添加到节点.

在数据绑定期间，将具有所需内容(用数据集中的数据替换某些内容"的数据)的隐藏div添加到Node.text.

Please take note of the NodeStyle added. The CSS class ''TreeItem'' gets added to anchor tags rendered for each node of treeview. We later use this class to add hover function to node using jquery.

Add a hidden div with required content(replace ''Some Content'' with data from Dataset) to Node.text during databind.

void Data_Bound(Object sender, TreeNodeEventArgs e)
  {

    string Prefix = "<div style='display:none;' class='content'>Some                     Content</div>";  
    e.Node.Text = Prefix + e.Node.Text;

  }

以下脚本将警告添加到Node.Text的div的内容.请根据您的需要对其进行自定义.该脚本在悬停的锚标记内搜索具有内容"类的div，并警告其innerHTML.

The following script will alert the contents of the div added to Node.Text. Please customize it for your needs. The script searches inside the anchor tag hovered for a div with class ''content'' and alerts its innerHTML.

<script type="text/javascript">

(document).ready(function(){

(document).ready(function() {

('a.TreeItem').hover(function(){ 警报(

('a.TreeItem').hover(function() { alert(

鼠标悬停在树视图节点上将显示一个弹出窗口，该弹出窗口从数据集中获取内容

相关推荐