代码改变世界

TreeView几个小技巧

2007-03-19 02:19  晓风残月  阅读(...)  评论(... 编辑 收藏
ASP.NET 2.0 提供的TreeView极大的方便了我们的树状菜单应用,但是它的很多功能都是基于PostBack的实现,有时候我们更希望在客户端完成。积累了几点,整理一下。
1。父子节点CheckBox的级联选择
这个 251 已经实现了http://www.cnblogs.com/itrust/archive/2006/04/03/365439.aspx

2。多选与单选的切换简单实现

3。如何不让点击节点默认回发页面
方法1:
<asp:TreeNode Text="New Node" Value="New Node" NavigateUrl="javascript:void(0)" ></asp:TreeNode>

方法2:
<asp:TreeNode Text="New Node" Value="New Node" NavigateUrl="#"></asp:TreeNode>
方法2有个缺陷,就是会在页内跳转“锚”
update 2007年7月11日
方法1 中可以直接这样 NavigateUrl="javascript:;"  即用一个 ; (分号)表示 javascript 的空语句。

update 2007年7月21日
事实上,TreeView 提供此功能,可以通过设置 TreeNode.SelectAction = Expand|None 来实现不回发
关于 TreeNode.Action 详细说明见 MSDN
http://msdn2.microsoft.com/zh-cn/library/System.Web.UI.WebControls.TreeNode.SelectAction.aspx


4。客户端得到NodeValue
根据 lovenets2008 http://www.cnblogs.com/lovenets2008/archive/2007/03/16/677427.html 提示我作了Demo

感谢 251 和 lovenets2008 的无私奉献^_^

Demo:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%--<script runat="server" type="text/C#">
    void Page_Load(
object sender, EventArgs e)
    {
        
// 客户端级联选择事件注册
        
if (!Page.IsPostBack) {
            
// 方法1
            
//treeCity.Attributes["onclick"= "OnTreeNodeChecked(event)";            
            
// 方法2 
            
// <asp:TreeView ID="treeCity" onclick="OnTreeNodeChecked(event)" 
        }
    }
</script>--
%>
<!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>GetNodeValueOnClient</title>
    
<!-- 251 的级联选择js库 http://www.cnblogs.com/Files/itrust/TreeView2.rar  -->
    
<script type="text/javascript" src="js/treeview2.js"></script>
<script type="text/javascript">
// 级联选择
//
 感谢 251 http://www.cnblogs.com/itrust/archive/2006/04/03/365439.aspx
function OnTreeNodeChecked(evt)
{
    
// 是否级联选择
    if(!document.getElementById("chkCascadingSelect").checked) {
        
return ;
    }

    
    
var element = window.event.srcElement;
    
if (!IsCheckBox(element))
        
return;
    
    
var isChecked = element.checked;            
    
var tree = TV2_GetTreeById("treeCity");
    
var node = TV2_GetNode(tree,element);      
    
    TV2_SetChildNodesCheckStatus(node,isChecked);  
    
    
var parent = TV2_GetParentNode(tree,node);        
    TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);       
}

</script>
<script type="text/javascript">
// 寻找选中节点 
//
 感谢 lovenets2008 http://www.cnblogs.com/lovenets2008/archive/2007/03/16/677427.html 
function findSelectedNodeValue()
{
    
//debugger;
    
    
// 节点值存储方式
    var sltNVSite = document.getElementById("sltNodeValueSite");
    
var ptn = sltNVSite.selectedIndex == 0 ? "nv=(\\S+)" : "javascript:void\\('(\\S+)'\\)"
    
var regx = new RegExp(ptn, "i");    
    
    
//
    var tree = document.getElementById("treeCity");
    
// 获取指定 TreeView 内的 checkbox
    var eles = tree.getElementsByTagName("input");
    
    
var e1, e2;
    
var eId;
    
var cityIds = "";
    
var mt;
    
// 遍历
    for(var i = 0; i < eles.length; i ++){
        e1 
= eles[i];        
        
if(e1.type == "checkbox" 
            
&& e1.checked) {
            eId 
= "treeCityt" + e1.id.match(/treeCityn(\d+)CheckBox/i)[1];
            e2 
= document.getElementById(eId);            
            
if(e2) {                
                mt 
= regx.exec(e2.href); // 匹配实际节点值
                if(mt) cityIds += mt[1+ ",";
            }

        }

    }
    
    
    
if(cityIds.length == 0{    
        
return alert("请选择节点");    
    }

    
    
// 去掉末尾 ,
    cityIds = cityIds.slice(0, cityIds.length - 1);
    
    alert(
"您选中的节点值:" + cityIds);
    
//return cityIds;
}

</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div style="float:left">
        
<asp:TreeView ID="treeCity" onclick="OnTreeNodeChecked(event)" ShowCheckBoxes="All" ExpandDepth="2" runat="server">
            
<Nodes>
                
<asp:TreeNode NavigateUrl="#nv=chongqing" Text="重庆市" Value="New Node">
                    
<asp:TreeNode Text="渝中区" Value="渝中区" NavigateUrl="#nv=yuzhong">
                        
<asp:TreeNode Text="New Node" Value="New Node">
                            
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        
</asp:TreeNode>
                        
<asp:TreeNode Text="New Node" Value="New Node">
                            
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                            
<asp:TreeNode Text="New Node" Value="New Node">
                                
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                            
</asp:TreeNode>
                        
</asp:TreeNode>
                    
</asp:TreeNode>
                    
<asp:TreeNode Text="沙坪坝区" Value="沙坪坝区" NavigateUrl="#nv=shapingba">
                        
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    
</asp:TreeNode>
                    
<asp:TreeNode Text="南岸区" NavigateUrl="javascript:void('nanan')" Value="南岸区">
                        
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    
</asp:TreeNode>
                    
<asp:TreeNode Text="江北区" NavigateUrl="javascript:void('jiangbei')" Value="江北区">
                        
<asp:TreeNode Text="New Node" Value="New Node">
                            
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        
</asp:TreeNode>
                        
<asp:TreeNode Text="New Node" Value="New Node">
                            
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        
</asp:TreeNode>
                    
</asp:TreeNode>
                    
<asp:TreeNode Text="南川市" NavigateUrl="javascript:void('nanchuan')" Value="南川市">
                        
<asp:TreeNode Text="New Node" Value="New Node">
                            
<asp:TreeNode Text="New Node" Value="New Node">
                                
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                            
</asp:TreeNode>
                        
</asp:TreeNode>
                    
</asp:TreeNode>
                
</asp:TreeNode>
                
<asp:TreeNode NavigateUrl="#nv=sichuan" Text="四川省" Value="New Node">
                    
<asp:TreeNode Text="成都市" Value="New Node"></asp:TreeNode>
                
</asp:TreeNode>
                
<asp:TreeNode Text="New Node" Value="New Node">
                    
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                
</asp:TreeNode>
                
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
            
</Nodes>
        
</asp:TreeView>
    
</div>
    
<div style="float:left">
    
<input type="checkbox" id="chkCascadingSelect" checked="checked" />级联选中
    
<br />
    
<select id="sltNodeValueSite">
        
<option value="0" selected="selected">#nv=somevalue</option>
        
<option value="1">javascript:void('somevalue')</option>
    
</select>节点值存储方式
    
<br />
    
<input type="button" value="FindSelectedNodeValue" onclick="findSelectedNodeValue()" />
    
</div>
    
</form>
</body>
</html>

5. TreeNode.Text 是可以嵌入 html 的,看如下的测试

    <div>
        
<asp:TreeView ID="TreeView1" runat="server">
            
<Nodes>
                
<asp:TreeNode Text="<span onclick='eval(this.parentNode.parentNode.previousSibling.firstChild.href);return false;' >Click me to Toggle</span>"
                    Value
="1">
                    
<asp:TreeNode Text="<input type='radio' name='grp'>1.1" Value="1.1" SelectAction="None">
                        
<asp:TreeNode Text="1.1.1" Value="1.1.1"></asp:TreeNode>
                    
</asp:TreeNode>
                
</asp:TreeNode>
                
<asp:TreeNode Text="2" Value="2">
                    
<asp:TreeNode Text="<input type='radio' name='grp'>2.1" Value="2.1" SelectAction="Expand">
                        
<asp:TreeNode Text="Click me to copy the node value to the textbox" Value="2.1.1"
                            NavigateUrl
="javascript:treeNode_Click('2.1.1');"></asp:TreeNode>
                    
</asp:TreeNode>
                
</asp:TreeNode>
                
<asp:TreeNode Text="3" Value="3">
                    
<asp:TreeNode Text="Click me to copy the node value to the textbox" Value="3.1" NavigateUrl="javascript:treeNode_Click('3.1');">
                    
</asp:TreeNode>
                
</asp:TreeNode>
            
</Nodes>
        
</asp:TreeView>
        
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        
<script type="text/javascript">
            
function treeNode_Click(args) {
                document.getElementById(
'TextBox1').value = args;
            }
        
</script>

    
</div>

 

之前不知道 SelectionAction 属性用如下代码来折叠/展开节点:

 <asp:TreeNode Text="<span onclick='eval(this.parentNode.parentNode.previousSibling.firstChild.href);' >Toggle</span>" NavigateUrl="javascript:;" Value="2.1">
                        
<asp:TreeNode Text="2.1.1" Value="2.1.1"></asp:TreeNode>
                    
</asp:TreeNode>

source:/Files/Jinglecat/GetNodeValueOnClient_07031902.rar