软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP.NET > Asp.net Treeview 实现客户端选中效果

Asp.net Treeview 实现客户端选中效果

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

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
TreeNode tn = new TreeNode();
tn.Text = “烈火网”;
tn.NavigateUrl = http://www.veryhuo.com;
tn.Target = "mainFr";

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

导航树

内嵌一个iframe name=” mainFr” 

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

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<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解析后的树节点如下:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<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&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);");即可。

代码如下:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
public class TreeNodeEx : TreeNode
{
protected override void RenderPreText(HtmlTextWriter writer)
{
writer.AddAttribute("onclick", " tn_Click(this);");
base.RenderPreText(writer);
}
}

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

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
TreeNodeEx tn = new TreeNodeEx();
tn.Text = “烈火网”;
tn.NavigateUrl = http://www.veryhuo.com;
tn.Target = "mainFr";

前台的JS代码如下:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
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";
}
}
}
    相关阅读
    网友评论
    栏目导航
    推荐软件