JQuery插件-级联选择（适用于TreeView）

转自http://zane.cnblogs.com/， 原文地址http://www.cnblogs.com/Zane/archive/2007/06/18/786819.html，在此感谢原文作者。本人也写过一篇相关的文章，不过没有用jquery，作者做成插件以后使用更方便了。

JQuery插件-级联选择（适用于TreeView）

    首先，分析一下TreeView在客户端生成的html。TreeView中的checkbox的id是TreeView的id + n + 数字 + CheckBox，其下级的checkbox集合则是包含在将该checkbox的id中的CheckBox替换成Nodes的div中所有的checkbox集合。而其上级checkbox的id是将该checkbox的父div的id中的Nodes替换成CheckBox。先看截图：

用法如下：

CascadingSelect : function(container, node, target)
当点击checkbox时调用这个方法，其中参数
container：容器的ID，如果使用母版页请用ClientID
node：包括key（关键字属性，一般使用checkbox的title属性），type（关键字类型，设置number表示数字，否则表示字符）
target：存放所选checkbox的控件，一般使用HiddenField

CascadingRefresh : function(container, node,  target)

PostBack时刷新checkbox的选择状态，参数同上
示例如下：

<script type="text/javascript">
    $(
        function()
        {
            $().CascadingRefresh("<%= this.TreeView1.ClientID %>", {key: "title", type: ""}, "<%= this.ID.ClientID %>");
            
            $("input[@type='checkbox']", $("#<%= this.TreeView1.ClientID %>")).click(
                function()
                {
                    $(this).CascadingSelect("<%= this.TreeView1.ClientID %>", {key: "title", type: ""}, "<%= this.ID.ClientID %>");
                });
        });
    </script>

    <asp:TreeView ID="TreeView1" runat="server">
        <Nodes>
            <asp:TreeNode ShowCheckBox="True" Text="1" Value="1">
                <asp:TreeNode ShowCheckBox="True" SelectAction="None" Text="1.1" Value="1.1">
                    <asp:TreeNode ShowCheckBox="True" Text="1.1.1" Value="1.1.1"></asp:TreeNode>
                    <asp:TreeNode ShowCheckBox="True" Text="1.1.2" Value="1.1.2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode ShowCheckBox="True" Text="1.2" Value="1.2"></asp:TreeNode>
                <asp:TreeNode ShowCheckBox="False" Text="1.3" Value="1.3">
                    <asp:TreeNode ShowCheckBox="True" Text="1.3.1" Value="1.3.1"></asp:TreeNode>
                    <asp:TreeNode ShowCheckBox="True" Text="1.3.2" Value="1.3.2"></asp:TreeNode>
                </asp:TreeNode>
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>

/Files/Zane/MultiSelect_20070618.rar

<script type="text/javascript"><!--google_ad_client = "pub-3438051938215365";//468x15, 创建于 07-11-13google_ad_slot = "0864523734";google_ad_width = 468;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>