我的Web应用程序中有一个treeview控件。我动态地构建这个树视图。
是否有选择节点并使用javascript或客户端运行的任何其他方法更改所选节点的颜色(我的意思是没有回发)。
我正在使用c#和asp.net来构建我的应用程序
答案 0 :(得分:0)
我可以考虑实现这两种方式:
方法2的更多细节如下......
将树视图控件放到aspx页面
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
添加虚节点并调用递归函数以删除超链接
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//add dummy nodes
TreeView1.Nodes.Add(new TreeNode() { Value = "1", Text = "One" });
TreeView1.Nodes.Add(new TreeNode() { Value = "2", Text = "Two" });
TreeView1.Nodes.Add(new TreeNode() { Value = "3", Text = "Three" });
//call recursive function to remove hyperlinks
RemoveHyperLinks(TreeView1, TreeView1.Nodes);
}
}
实现递归函数
System.Web.UI.WebControls.TreeView RemoveHyperLinks(System.Web.UI.WebControls.TreeView treeView, TreeNodeCollection treeNodes)
{
foreach (TreeNode node in treeNodes)
{
node.SelectAction = TreeNodeSelectAction.None;//here the link is removed
if (node.ChildNodes != null && node.ChildNodes.Count > 0)
{
treeView = RemoveHyperLinks(treeView, node.ChildNodes);
}
}
return treeView;
}
将此JQuery代码放在aspx页面上
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
答案 1 :(得分:0)
编辑(关于JQuery的更多解释):
JQuery是一个包含JavaScript函数的.js文件,可以更轻松地导航文档,选择DOM元素,创建动画,处理事件和开发Ajax应用程序。
您可以从JQuery official website下载JQuery.js文件,然后在调用第一个JQuery脚本之前引用JQuery.js文件(就像您引用其他.js文件一样),如下所示:
<script type="text/javascript" src="jQuery.js"></script>
或者,您可以使用JQuery.js file hosted by Google。这就是我为测试所做的。以下是我的.aspx页面的完整代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="TreeView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2).
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
$(this).css('cursor', 'pointer');
});
//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
$(".TreeView1_0").css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</div>
</form>
</body>
</html>