ASP.NET2.0 中TreeView控件：如何做到点击节点而不刷新页面？

客户端无法直接获取 Value ，需要点技巧
看我的解决方案TreeView几个小技巧
http://www.cnblogs.com/Jinglecat/archive/2007/03/19/679313.aspx
<%@ 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>
    
    <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>

调试易

ASP.NET2.0 中TreeView控件：如何做到点击节点而不刷新页面？

解决方案 »