TreeView几个小技巧

2007-03-19 02:19 by 晓风残月, 11751 visits, 收藏, 编辑

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">

<title>GetNodeValueOnClient</title>

// 级联选择

// 感谢 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>

// 寻找选中节点

// 感谢 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>

<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">