• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Asp.netTreeview客户端选中效果实现(初级)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 

 

最近将asp.net默认自带的treeview控件,做成一个导航树,导向其它的几个站点,所以这样写

 

TreeNode tn = new TreeNode();

tn.Text = 新浪网;

tn.NavigateUrl = "http://www.sina.com.cn";

tn.Target = "mainFr";

 

但是发现一个问题,所选中的树节点,不会选中效果

 

导航树

内嵌一个iframe name=” mainFr” 

然后自然想起用自定义样式,来解决这个问题,于是从网络上随便COPY了一段样式回来如下:

<asp:TreeView ID="TreeView1" runat="server" ShowLines="True">

                <SelectedNodeStyle BackColor="White" VerticalPadding="1px" BorderColor="#888888"

                    BorderStyle="Solid" BorderWidth="1px" HorizontalPadding="3px"></SelectedNodeStyle>

                <NodeStyle VerticalPadding="2px" Font-Names="Verdana" Font-Size="8pt" NodeSpacing="1px"

                    HorizontalPadding="5px" ForeColor="Black"></NodeStyle>

                <HoverNodeStyle BackColor="#CCCCCC" BorderColor="#888888" BorderStyle="Solid" BorderWidth="1px"

                    Font-Underline="True"></HoverNodeStyle>

            </asp:TreeView>

 

但结果你会发现只有鼠标移入移出有效果,点中是没有效果的,分析最后生成的HTML解析后的树节点如下:

 

 <table cellpadding="0" cellspacing="0" style="border-width:0;">

         <tr style="height:1px;">

              <td></td>

         </tr><tr>

              <td><img src="/pms2/WebResource.axd?d=NcGWj-qNqtl9MKe7hlPi6oqQI3MC5mSq6_3UjP0SAHw1&amp;t=633911118017187500" alt="" /></td><td class="TreeView1_2" onmouseover="TreeView_HoverNode(TreeView1_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="TreeView1_0 TreeView1_1" href="http://www.sina.com.cn" target="mainFr" onclick="javascript:TreeView_SelectNode(TreeView1_Data, this,'TreeView1t3');" id="TreeView1t3">3</a></td>

         </tr><tr style="height:1px;">

              <td></td>

         </tr>

     </table>

 

分析上面这段HTML,发现构成一个treenode对象是由<Td><a>标记来生成,看到这里,自然就想在<a> 加上一个自己的onclick客户端事件,点击这个<a>标签的时候能够变化树的当前选中样式,于是想到继承TreeNode对象,再AddAttribute("onclick", "tn_Click(this);");即可。

代码如下:

 

public class TreeNodeEx : TreeNode

    {

        protected override void RenderPreText(HtmlTextWriter writer)

        {

            writer.AddAttribute("onclick", " tn_Click(this);");

            base.RenderPreText(writer);

        }

    }

 

构造节点的时候代码如下:

TreeNodeEx  tn = new TreeNodeEx();

                tn.Text = 新浪网;

                tn.NavigateUrl = "http://www.sina.com.cn";

                tn.Target = "mainFr";

 

前台的JS代码如下:

tn_Click 函数

function tn_Click(obj)

{

            var ds = document.getElementById("TreeView1").getElementsByTagName("a");

            for(var i=0;i<ds.length;i++)

            {

                if(ds[i].className!="" && ds[i]!=obj)

                { 

                    //普通状态样式

                    ds[i].className="TreeView1_1";

                    //alert(ds[i].className);

                }

                else

                {

                    //选中的样式

                    obj.className = "TreeView1_1 TreeView1_5";

                }

            }

        }

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap