zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    五、Django之路由系统
    四、Django设置相关
    三、Django安装和流程
    二、Web框架实现
    Flask学习-Wsgiref库
    设计模式之设计模式六大原则(三大基本原则)【1】
    Linux之更改Nginx映射默认根目录
    顺序列表(栈/队列等)ADT[C++]
    [C++]数组与指针(纯代码-复习用)
    [C++]指针与多级指针(图解)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2338145.html
Copyright © 2011-2022 走看看