JS控制TreeView的结点选择

控制TreeView结点选择的方法主要有以下两种：

1. 使用JavaScript代码控制TreeView的结点选择

可以通过JS控制TreeView的checkbox，从而实现TreeView的选择控制。具体实现过程如下：

（1）获取TreeView的DOM结构

<asp:TreeView ID="TreeView1" runat="server">
    <Nodes>
        <asp:TreeNode Text="Node1" Value="1">
            <asp:TreeNode Text="Node1-Child1" Value="1-1">
                <asp:TreeNode Text="Node1-Child1-Child1" Value="1-1-1"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Node1-Child2" Value="1-2"></asp:TreeNode>
        </asp:TreeNode>
        <asp:TreeNode Text="Node2" Value="2">
            <asp:TreeNode Text="Node2-Child1" Value="2-1"></asp:TreeNode>
        </asp:TreeNode>
    </Nodes>
</asp:TreeView>

（2）使用JavaScript代码获取TreeView的checkbox

var chklist = document.getElementById("<%=TreeView1.ClientID%>").getElementsByTagName("input");
for (var i = 0; i < chklist.length; i++) {
    if (chklist[i].type == "checkbox") {
        chklist[i].onclick = function () {
            var parent = $(this).closest("table").prev("div");
            if ($(this).is(":checked")) {
                parent.addClass("ui-state-active");
            }
            else {
                parent.removeClass("ui-state-active");
            }
        };
    }
}

（3）实现结点的选择控制

var chklist = document.getElementById("<%=TreeView1.ClientID%>").getElementsByTagName("input");
for (var i = 0; i < chklist.length; i++) {
    if (chklist[i].type == "checkbox") {
        chklist[i].onclick = function () {
            var parent = $(this).closest("table").prev("div");
            if ($(this).is(":checked")) {
                parent.addClass("ui-state-active");
            }
            else {
                parent.removeClass("ui-state-active");
            }
            var child = $(this).closest("table").next("table").find(":checkbox");
            child.attr("checked", $(this).is(":checked")).checkboxradio("refresh");
            child.each(function () {
                var parent = $(this).closest("table").prev("div");
                if ($(this).is(":checked")) {
                    parent.addClass("ui-state-active");
                }
                else {
                    parent.removeClass("ui-state-active");
                }
            });
            var parent = $(this).parents(":has(:checkbox)")[0];
            while (parent) {
                var sibling = $(parent).siblings(":has(:checkbox)").find(":checkbox");
                var parent_chk = $(parent).find(":checkbox:first");
                parent_chk.attr("checked", sibling.length > 0 && sibling.filter(":checked").length == sibling.length).checkboxradio("refresh");
                parent = $(parent).parents(":has(:checkbox)")[0];
            }
        };
    }
}

1. 使用TreeView控件的OnTreeNodeChecked方法控制结点选择

可以在TreeView控件的OnTreeNodeChecked事件中对结点的选择状态进行控制。具体实现过程如下：

（1）定义TreeView控件及其对应的OnTreeNodeChecked方法

<asp:TreeView ID="TreeView1" runat="server" OnTreeNodeChecked="TreeView1_TreeNodeChecked">
    <Nodes>
        <asp:TreeNode Text="Node1" Value="1">
            <asp:TreeNode Text="Node1-Child1" Value="1-1">
                <asp:TreeNode Text="Node1-Child1-Child1" Value="1-1-1"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Node1-Child2" Value="1-2"></asp:TreeNode>
        </asp:TreeNode>
        <asp:TreeNode Text="Node2" Value="2">
            <asp:TreeNode Text="Node2-Child1" Value="2-1"></asp:TreeNode>
        </asp:TreeNode>
    </Nodes>
</asp:TreeView> 

protected void TreeView1_TreeNodeChecked(object sender, TreeNodeEventArgs e)
{
    foreach (TreeNode node in e.Node.ChildNodes)
    {
        node.Checked = e.Node.Checked;
        CheckChildNodes(node);
    }
}

private void CheckChildNodes(TreeNode node)
{
    foreach (TreeNode childnode in node.ChildNodes)
    {
        childnode.Checked = node.Checked;
        CheckChildNodes(childnode);
    }
}

（2）在页面中添加相应的JS代码

$(document).ready(function () {
    $(".AspNet-TreeView-ExpandCollapse").click(function () {
        setTimeout(function () {
            $(".AspNet-TreeView-ExpandCollapse").each(function () {
                var img = $(this).find("img:first");
                var src = img.attr("src");
                if (src.indexOf("plus.gif") >= 0) {
                    img.attr("src", src.replace("plus.gif", "minus.gif"));
                }
                else if (src.indexOf("minus.gif") >= 0) {
                    img.attr("src", src.replace("minus.gif", "plus.gif"));
                }
            });
        }, 100);
    });
});

以上就是控制TreeView结点选择的完整攻略及两条示例说明。